实现一个鼠标移入移出盒子隐藏显示的效果

最新推荐文章于 2023-04-15 10:58:28 发布

~嘘~禁止想象~

最新推荐文章于 2023-04-15 10:58:28 发布

阅读量1.6k

点赞数 2

分类专栏： # JavaScript小练习

本文链接：https://blog.csdn.net/weixin_45773503/article/details/112861533

版权

JavaScript setTimeout 事件监听元素显示隐藏鼠标悬停

关键词由CSDN通过智能技术生成

JavaScript小练习专栏收录该内容

36 篇文章 1 订阅

订阅专栏

应用场景：往往我们在鼠标附着在一个盒子A上时另一个盒子B会出现，如果鼠标移开，盒子B延时消失，如果移入了盒子B那么不消失。

利用setTimeout实现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            float: left;
        }
        
        .red {
            width: 100px;
            height: 200px;
            background-color: red;
        }
        
        .blue {
            width: 100px;
            height: 100px;
            background-color: blue;
            display: none;
        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="blue"></div>
    <script>
        var red = document.querySelector('.red');
        var blue = document.querySelector('.blue');
        var timer = null;

        // red.addEventListener('mouseover', function() {
        //     clearTimeout(timer);
        //     blue.style.display = 'block';
        // })

        // red.addEventListener('mouseleave', function() {
        //     timer = setTimeout(function() {
        //         blue.style.display = 'none';
        //     }, 500);
        // })

        // blue.addEventListener('mouseover', function() {
        //     clearTimeout(timer);
        // })

        // blue.addEventListener('mouseleave', function() {
        //     timer = setTimeout(function() {
        //         blue.style.display = 'none';
        //     }, 500);
        // })





        function over() {
            clearTimeout(timer);
            blue.style.display = 'block';
        }

        function leave() {
            timer = setTimeout(function() {
                blue.style.display = 'none';
            }, 500);
        }

        red.addEventListener('mouseover', over)
        blue.addEventListener('mouseover', over)

        red.addEventListener('mouseleave', leave)
        blue.addEventListener('mouseleave', leave)
    </script>
</body>

</html>