在人人，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；} #通知{位置：绝对；top: 20px宽度： 350像素；最大高度： 250像素；/* 设置最大高度，当高度达到此值时出现滚动条*/z-index : 10；背景色-颜色： # E0E5E 5；飞越：汽车；/* 自动添加滚动条*/box-shadow :0 px 0px 10px # 000；/* 外阴影*/display:无；/* 默认隐藏*/} # informTable { table-layout :固定；/* 用于实现表格任务描述自动换行的部分代码*/宽度： 325 px} # informTable tr TD { width : 325 px；高度：30 pxfont-size : 16px佐治亚州字体家族：颜色： # 555555单词包装：断字；/*自动换行*/padd : 0 0 0 0；} # informTable tr TD :悬停{底色： # d9d 9；} #通知hr { border:1宽度： 325像素；边距-底部： 0px}/样式脚本类型='text/javascript' //显示悬浮层函数show inform(){文档。getelementbyid(' inform ')。风格。display=' block//文档。getelementbyid(' inform ').css('display '，' block ')；} //隐藏悬浮层函数hiddenInform(event){ var informDiv=document。getelementbyid(' inform ')；var x=event . clientxvar y=event . clientyvar div x1=informdiv . offsetleftvar div 1=informdiv . offsettopvar div x2=informdiv。offsetleft informdiv。偏移；var div 2=informdiv。偏移顶部信息iv。偏移光线；if(x div x1 | | x div x2 | | y div y1 | | y div y2){ document。getelementbyid(' inform ')。风格。显示='无'；} }/脚本正文a id=' BTN ' onMouseOver=' JavaScript : shoulinform()；'onMouseOut='hiddenInform()'警告消息/a div id=' inform ' onMouseOver=' JavaScript : shoulform()；'onMouseOut='hiddenInform(事件)'表id='informTable' tr td编号5005车辆发车间隔异常HR//TD/tr TD编号5005车辆发车间隔异常HR//TD/tr TD编号5005车辆发车间隔异常HR//TD/tr TD编号5005车辆发车间隔异常HR//TD/tr TD编号5005车辆发车间隔异常HR//TD/tr TD编号5005车辆发车间隔异常HR//TD/tr TD编号5005车辆发车间隔异常HR//TD/tr TD编号5005车辆发车间隔异常hr//td /tr /table /div /body /html效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。