有些网站，当鼠标在某个东西上悬浮时，会弹出一个悬浮层，鼠标移开悬浮层消失。比如说csdn的通知（应该是进入写新文章的页面后页面上方的那个铃铛），具体是什么实现的呢？
代码：
nbsp;html>TEST 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; } //显示悬浮层 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 px2 || y py2){ document.getElementById('inform').style.display='none'; } } 警告消息
登录后复制 编号5005车辆发车间隔异常 编号5005车辆发车间隔异常 编号5005车辆发车间隔异常 编号5005车辆发车间隔异常 编号5005车辆发车间隔异常 编号5005车辆发车间隔异常 编号5005车辆发车间隔异常 编号5005车辆发车间隔异常
以上就是鼠标在文字上悬浮时弹出悬浮层效果的实现代码的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2779388.html
