JS实现提示框随鼠标移动
共享实例代码:
!DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { padd : 0;margin : 0;} .box { width:500pxmargin: 300px汽车;border:固体1px黑色;相对位置:} .标题{}。标题h2 {背景色: # CCC;padd : 10px 0;border: 1px固体# 000;/*相对位置:*//*z指数: 2;*/margin-bottom : 30px;} .cont p { width:200px背景技术# eeemargin : 0;display:无;绝对位置:left : 0;top:0/* z-index : 6;*/}/style/headsdydiv class=' box ' Div class=' title ' H2二级标题二级标题1111/h2 h2二级标题二级标题2222/H2/Div class=' cont ' P第一新闻内容第一新闻内容第一新闻内容第一新闻内容第一新闻内容/P第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容第二新闻内容/P/Div/Div/body scriptquery selectorall(' . title H2 ');var aP=document . queryselectorall('。cont p’);for(var I=0;iaH.lengthI ){//首先遍历元素aH[i]。索引=I;//不.啊[我]。onmouseover=function(){//移入显示AP [this。索引]。风格。display=' block}啊[我]。onmouseout=function(){//移出并消失AP [this。索引]。风格。display=' none'}啊[I]。onmousemove=function(eve){//使p跟随鼠标var e=eve | | window。事件AP【这。index]Ap[this . index]. style . top=e . offsetty 5 this . offsettop ' px ';//因为p的定位是相对于大方框的,偏移的坐标相对于事件源不够,所以需要加上左边和顶部;相对于大框的事件源;5是错开p和h,这样p就不会一直眨眼。} }/脚本/html效果图片:
感兴趣的朋友测试一下,谢谢支持。
版权声明:JS实现提示框随鼠标移动是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。