提示框跟随鼠标移动

Posted hy96

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了提示框跟随鼠标移动相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
            padding: 0;
            margin: 0;
        
        .boxwidth:500px;margin: 300px auto;border: solid 1px black;position: relative;
        .title
        .title h2background-color: #ccc;padding: 10px 0;  border: 1px solid #000;
            /*position: relative;*/
            /*z-index: 2;*/
            margin-bottom: 30px;
        .cont pwidth: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>二级标题二级标题二级标题1111</h2>
        <h2>二级标题二级标题二级标题2222</h2>
    </div>
    <div class="cont">
        <p>第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容</p>
        <p>第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容</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;  //编号
        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>

 

以上是关于提示框跟随鼠标移动的主要内容，如果未能解决你的问题，请参考以下文章

鼠标跟随提示框

为啥设置了pageX和pageY创建的提示框不会随着鼠标移动

Bootstarp4 提示框

jquery 做一个 鼠标移动table上的tr的时候，在鼠标旁边弹出一个div提示框

Bom——拖拽框

用JS DIV CSS 做一个信息提示框。