JS实现跟随鼠标的提示框
程序员文章站
2022-04-10 09:47:08
跟随鼠标的提示框鼠标移入到某个关键词就会出现提示框并且在关键词范围内跟随鼠标的移动是怎么实现的呢？下面来看代码简单的html和css诸葛亮霍去病唐太宗武则天
跟随鼠标的提示框
鼠标移入到某个关键词就会出现提示框并且在关键词范围内跟随鼠标的移动是怎么实现的呢？
下面来看代码
简单的html和css
<body>
<a href="#">诸葛亮</a>
<a href="#">霍去病</a>
<a href="#">唐太宗</a>
<a href="#">武则天</a>
<div id="msg">
</div>
</body>
<style type="text/css">
a{display: block;margin: 100px auto;width: 90px;font-size: 30px;}
#msg{width: 300px;height: 150px;background-color: #808080;display: none;position: absolute;}
</style>
JS代码
window.onload=function(){
var oAs=document.getElementsByTagName("a");
var oDiv=document.getElementById("msg");
var arr=["诸葛亮（181年—234年10月8日），字孔明，号卧龙，琅琊阳都（今山东沂南）人，三国时期蜀汉丞相，杰出的政治家、军事家、文学家、书法家、发明家。","霍去病（公元前140年—公元前117年），汉族，河东平阳（今山西省临汾西南）人，西汉中期名将、军事家、外戚。官至大司马骠骑将军，封冠军侯。","唐太宗一般指李世民。唐太宗李世民（598.1.28或599.1.23—649.7.10），陇西狄道（今甘肃省临洮县）人。唐朝第二位皇帝（626—649年在位），政治家、战略家、军事家、诗人。唐高祖李渊嫡次子，母为太穆皇后窦氏。","武曌[zhào]（624年－705年12月16日），即武则天，并州文水（今山西文水）人。唐朝至武周时期政治家，武周开国君主（690年－705年在位），也是中国历史上唯一的正统女皇帝、即位年龄最大（67岁）及寿命最长的皇帝之一（82岁），与汉朝的吕武。"];
for(var i=0;i<oAs.length;i++){
oAs[i].index=i;
oAs[i].onmouseover=function(){
oDiv.style.display="block";
oDiv.innerHTML=arr[this.index];
}
oAs[i].onmouseout=function(){
oDiv.style.display="none";
}
oAs[i].onmousemove=function(ev){
var e=ev||window.event;
oDiv.style.left=e.clientX+3+"px";
oDiv.style.top=e.clientY+3+"px";
}
}
}
上述代码为什么要在坐标上加3个像素呢？
因为鼠标移入到a标签上时，显示提示框div标签，此时div标签就会覆盖a标签从而系统就会判断此时鼠标离开了a标签，提示框也就消失了。
所以这个时候加上3个像素偏移使div不会覆盖鼠标所停留处的a标签，提示框就不会消失，就会一直存在。
本文地址：https://blog.csdn.net/weixin_42303695/article/details/107239916