溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關JS怎么實現提示框跟隨鼠標移動，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
分享實例代碼：
<!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 h3{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">
<h3>二級標題二級標題二級標題1111</h3>
<h3>二級標題二級標題二級標題2222</h3>
</div>
<div class="cont">
<p>第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容</p>
<p>第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容</p>
</div>
</div>
</body>
<script>
var aH=document.querySelectorAll(".title h3");
var aP=document.querySelectorAll(".cont p");
for(var i=0;i<aH.length;i++){//先遍歷元素
aH[i].index=i; //編號
aH[i].onmouseover=function () {//移進來顯示
aP[this.index].style.display="block";
}
aH[i].onmouseout=function () {//移出去消失
aP[this.index].style.display="none"
}
aH[i].onmousemove=function (eve) { //使p跟著鼠標走
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"; // 因為p的定位相對于大框，offset的坐標相對于事件源，不夠，需要加上事件源相對于大框的left和top；+5是為了讓p和h錯開，這樣p就不會一直閃爍了。
}
}
</script>
</html>效果圖片：
關于“JS怎么實現提示框跟隨鼠標移動”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
