利用JavaScript实现鼠标在文字上悬浮时弹出悬浮层

最新推荐文章于 2023-07-26 16:53:37 发布

sunqian_happy

最新推荐文章于 2023-07-26 16:53:37 发布

阅读量3k

点赞数 2

分类专栏：页面相关

页面相关专栏收录该内容

48 篇文章 1 订阅

订阅专栏

在人人,CSDN等一些网站，当鼠标在某个东西上悬浮时，会弹出一个悬浮层，鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢？代码：

[html]view plaincopy 
   
 <!doctype html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
     <title>TEST</title>  
 </head>  
 <style type="text/css">  
     body{  
         position: relative;  
     }  
     #inform{  
           position: absolute;  
           top: 20px;  
           width: 350px;  
           max-height: 250px;           /* 设置最大高度，当高度达到此值时出现滚动条 */  
           z-index: 10;  
           background-color: #E0E5E5;   
           overflow: auto;              /* 自动添加滚动条 */  
           box-shadow:0px 0px 10px #000;   /* 外阴影 */  
           display: none;   /* 默认隐藏 */  
     }  
     #informTable{  
         table-layout:fixed;         /* 用于实现表格td自动换行的部分代码*/  
         width: 325px;  
     }  
   
     #informTable tr td{  
         width: 325px;  
         height:30px;  
         font-size: 16px;  
         font-family: Georgia;  
         color: #555555;  
         word-wrap:break-word;   /*自动换行*/  
         padding: 0 0 0 0;  
     }  
     #informTable tr td:hover{  
         background-color: #D9D9D9;   
     }  
     #inform hr{  
         border:1;  
         width: 325px;  
         margin-bottom: 0px;  
     }  
   
 </style>  
 <script type="text/javascript">  
       //显示悬浮层  
       function showInform(){  
         document.getElementById("inform").style.display='block';  
          // document.getElementById("inform").css("display","block");  
       }  
       //隐藏悬浮层  
       function hiddenInform(event){  
          var informDiv = document.getElementById('inform');  
          var x=event.clientX;    
          var y=event.clientY;    
          var divx1 = informDiv.offsetLeft;    
          var divy1 = informDiv.offsetTop;    
          var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;    
          var divy2 = informDiv.offsetTop + informDiv.offsetHeight;  
          if( x < divx1 || x > divx2 || y < divy1 || y > divy2){    
               document.getElementById('inform').style.display='none';    
          }    
           
       }  
   
   
 </script>  
 <body>   
     <a id="btn" onMouseOver="javascript:showInform();"  onMouseOut="hiddenInform()">  
         警告消息  
     </a>  
     <div id="inform"  onMouseOver="javascript:showInform();"  onMouseOut="hiddenInform(event)">  
            <table id="informTable">  
               <tr>  
                 <td>  
                      编号5005车辆发车间隔异常  
                     <hr/>  
                 </td>  
               </tr>  
               <tr>  
                 <td>  
                      编号5005车辆发车间隔异常  
                     <hr/>  
                 </td>  
               </tr>  
               <tr>  
                 <td>  
                      编号5005车辆发车间隔异常  
                     <hr/>  
                 </td>  
               </tr>  
               <tr>  
                 <td>  
                      编号5005车辆发车间隔异常  
                     <hr/>  
                 </td>  
               </tr>  
               <tr>  
                 <td>  
                      编号5005车辆发车间隔异常  
                     <hr/>  
                 </td>  
               </tr>  
               <tr>  
                 <td>  
                      编号5005车辆发车间隔异常  
                     <hr/>  
                 </td>  
               </tr>  
               <tr>  
                 <td>  
                      编号5005车辆发车间隔异常  
                     <hr/>  
                 </td>  
               </tr>  
               <tr>  
                 <td>  
                      编号5005车辆发车间隔异常  
                     <hr/>  
                 </td>  
               </tr>  
            </table>  
     </div>  
 </body>  
 </html>  

效果图如下：

sunqian_happy

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript实现鼠标在文字上悬浮时弹出悬浮层

在人人,CSDN等一些网站，当鼠标在某个东西上悬浮时，会弹出一个悬浮层，鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢？代码：[html] view plaincopy> head> meta http-equiv="Content-Type" content="text/ht
复制链接

扫一扫