您好,欢迎访问一九零五行业门户网

鼠标放在文字上弹出悬浮层

这次给大家带来鼠标放在文字上弹出悬浮层,鼠标放在文字上弹出悬浮层的注意事项有哪些,下面就是实战案例,一起来看一下。
比如说csdn的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码:
<!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 informp = document.getelementbyid('inform');    var x=event.clientx;    var y=event.clienty;    var px1 = informp.offsetleft;    var py1 = informp.offsettop;    var px2 = informp.offsetleft + informp.offsetwidth;    var py2 = informp.offsettop + informp.offsetheight;    if( x < px1 || x > px2 || y < py1 || y > py2){    document.getelementbyid('inform').style.display='none';    }      }      </script>  <body>   <a id="btn" onmouseover="javascript:showinform();" onmouseout="hiddeninform()">   警告消息   </a>   <p 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>   </p>  </body>  </html>
效果图如下:
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
vue中v-show判断表达式如何实现
非数组对象怎么转换成数组
以上就是鼠标放在文字上弹出悬浮层的详细内容。
其它类似信息

推荐信息