案例鼠标跟随

最新推荐文章于 2024-09-29 09:51:41 发布

Girasoless

最新推荐文章于 2024-09-29 09:51:41 发布

阅读量137

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Girasoles/article/details/128011179

版权

知识点：

任何事件在我身上触发的时候, 直接从我身上穿透下去, 相当于触发在我下面的元素上

pointer-events: none;

案例：点击那个出现那个选项，选项并跟随鼠标移动

需求:

=> 就是让鼠标进入到每一个对应的li的时候

=> 让下面的对应p标签显示

=> 离开的时候 p 标签隐藏

=> 在对应的li里面移动的时候 , 让p标签跟随

分析:

=> 需要给每一个li添加以下事件

-> 鼠标进入: mouseover

-> 鼠标移动: mousemove

-> 鼠标离开: mouseout

=> 需要在鼠标移动的时候实时获取坐标点

JS部分

        // 获取元素
        var lis = document.querySelectorAll('li')
        // 给每一个li添加事件
        lis.forEach(function (item) {
            item.onmouseover = overHandler
            item.onmousemove = moveHandler
            item.onmouseout = outHandler
        }) 

        // 鼠标进入的函数
        function overHandler() {
            // console.log(111);
            // 让对应的p标签要显示出来
            this.firstElementChild.style.display = 'block'
        }

        // 鼠标移动的函数
        function moveHandler(e) {
            // console.log(222);
            e = e || window.event
            // 获取坐标点
            // 获取那一组 offset 一组
            var x = e.offsetX
            var y = e.offsetY
            // 赋值给移动的元素 也就是 p 标签
            this.firstElementChild.style.left = x + 'px'
            this.firstElementChild.style.top = y + 'px'
        }

        // 鼠标离开的函数
        function outHandler() {
            // console.log(333);
            // 让对应的p标签要隐藏出来
            this.firstElementChild.style.display = 'none'
        }

CSS部分

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        ul {
            margin: 100px;
        }
        
        li {
            width: 500px;
            height: 60px;
            position: relative;
            border: 1px solid #333;
            margin-bottom: 20px;
            font-size: 30px;
            background-color: #fff;
        }
        
        li>p {
            width: 300px;
            height: 200px;
            background-color: pink;
            position: absolute;
            left: 800px;
            display: none;
            /* 任何事件在我身上触发的时候, 直接从我身上穿透下去, 相当于触发在我下面的元素上 */
            pointer-events: none;
            z-index: 999;
        }
    </style>
</head>

<body>

    <ul>
        <li>我是标题1
            <p>我是标题1的说明文件1</p>
        </li>
        <li>我是标题2
            <p style="background-color: skyblue;">我是标题2的说明文件2</p>
        </li>
        <li>我是标题3
            <p style="background-color: orange;">我是标题3的说明文件3</p>
        </li>
    </ul>
</body>