JS實(shí)現(xiàn)提示框跟隨鼠標(biāo)移動(dòng)

2019-11-19 10:57:07

字體：大中小

供稿：網(wǎng)友

分享實(shí)例代碼：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      padding: 0;      margin: 0;    }    .box{width:500px;margin: 300px auto;border: solid 1px black;position: relative;}    .title{}    .title h2{background-color: #ccc;padding: 10px 0; border: 1px solid #000;      /*position: relative;*/      /*z-index: 2;*/      margin-bottom: 30px;}    .cont p{width:200px;background: #eee;margin: 0;display: none;position: absolute;left: 0;top:0;      /*z-index: 6;*/     }  </style></head><body><div class="box">  <div class="title">    <h2>二級(jí)標(biāo)題二級(jí)標(biāo)題二級(jí)標(biāo)題1111</h2>    <h2>二級(jí)標(biāo)題二級(jí)標(biāo)題二級(jí)標(biāo)題2222</h2>  </div>  <div class="cont">    <p>第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容第一個(gè)新聞內(nèi)容</p>    <p>第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容第二個(gè)新聞內(nèi)容</p>  </div></div></body><script>var aH=document.querySelectorAll(".title h2");var aP=document.querySelectorAll(".cont p");  for(var i=0;i<aH.length;i++){//先遍歷元素    aH[i].index=i; //編號(hào)    aH[i].onmouseover=function () {//移進(jìn)來顯示      aP[this.index].style.display="block";    }    aH[i].onmouseout=function () {//移出去消失      aP[this.index].style.display="none"    }    aH[i].onmousemove=function (eve) { //使p跟著鼠標(biāo)走      var e=eve||window.event      aP[this.index].style.left=e.offsetX+5+"px";           aP[this.index].style.top=e.offsetY+5+        this.offsetTop+"px"; // 因?yàn)閜的定位相對(duì)于大框，offset的坐標(biāo)相對(duì)于事件源，不夠，需要加上事件源相對(duì)于大框的left和top；+5是為了讓p和h錯(cuò)開，這樣p就不會(huì)一直閃爍了。    }  }</script></html>

效果圖片：