博客

2022-06-10 jQuery案例:鼠标跟随显示悬浮信息

  • Post author:
  • Post category:其他




思路

鼠标移入 悬停信息显示

鼠标移出 悬停信息隐藏

鼠标移动 悬停信息随鼠标移动



代码
<style>
    div {
        margin: 100px;
        width: 150px;
        height: 50px;
        background: pink;
        /*穿透*/
        /* pointer-events: none; */
    }
    p {
        position: relative;
        display: none;
        width: 250px;
        height: 400px;
        background: yellow;
    }
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <div>头像</div>
    <p></p>
    <script>
        // 鼠标移入移出时悬停信息显示与隐藏
        $("div").mouseover(function() {
            $("p").css("display", "block");
        });
        $("div").mouseout(function() {
            $("p").css("display", "none");
        });
        // 悬停信息随鼠标移动
        $("div").mousemove(function(eve) {
            $("p").offset({
                left: eve.pageX,
                top: eve.pageY
            });
        });
    </script>
</body>


结果

在这里插入图片描述


版权声明：本文为rowlet原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。