这次给大家带来鼠标放在文字上弹出悬浮层,鼠标放在文字上弹出悬浮层的注意事项有哪些,下面就是实战案例,一起来看一下。

比如说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>

效果图如下:

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue中v-show判断表达式如何实现