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

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

利用setTimeout实现


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

你可能感兴趣的:(#,JavaScript小练习)