如何解决鼠标hover div元素时出现的闪烁问题？

你遇到的闪烁问题根源在于：当鼠标悬停在div1上触发mouseover事件后，你立刻把div1设为visibility: hidden，此时鼠标不再处于div1的范围内，会立刻触发div1的mouseout事件，导致div1重新显示、div2隐藏。这个过程反复循环，就出现了闪烁现象。

下面提供两种可行的解决方案：

方案一：通过父容器监听事件 #

用一个父容器包裹div1和div2，监听父容器的mouseenter和mouseleave事件。这样不管内部元素如何切换，只要鼠标在父容器范围内，就不会触发离开事件，从根源避免循环触发问题。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Week6</title>
    <style>
        #p1{
            font-size: 2em;
            color: blue;
        }

        #parent{
            position: relative;
            min-height: 50px;
        }

        #div1{
            position: absolute;
            visibility: visible;
            padding: 0px;
        }

        h1{
            font-size: 3em;
            color: yellow;
            font-style: italic;
        }

        #div2{
            display: flex;
            justify-content: center;
            margin-top: -10px;
            left: 500px;
            visibility: hidden;
            position: absolute;
        }
    </style>
    
</head>
<body>
    <div id="parent">
        <div id="div1">
            <h2>Move the cursor over the text to see it change.</h2>
        </div>

        <div id="div2">
            <h1>Move the cursor over the text to see it change.</h1>
        </div>
    </div>
    
</body>
</html>

<script>
    let parent = document.getElementById("parent");
    let div1 = document.getElementById("div1");
    let div2 = document.getElementById("div2");

    parent.addEventListener('mouseenter', () => {
        div1.style.visibility = "hidden";
        div2.style.visibility = "visible";
    });

    parent.addEventListener('mouseleave', () => {
        div1.style.visibility = "visible";
        div2.style.visibility = "hidden";
    })
</script>

方案二：使用CSS :hover实现（更简洁） #

直接利用CSS的:hover伪类控制元素的显示隐藏，完全不需要JavaScript，避免事件循环问题，代码更简洁易维护。

完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Week6</title>
    <style>
        #p1{
            font-size: 2em;
            color: blue;
        }

        #parent{
            position: relative;
            min-height: 50px;
        }

        #div1{
            position: absolute;
            visibility: visible;
            padding: 0px;
        }

        h1{
            font-size: 3em;
            color: yellow;
            font-style: italic;
        }

        #div2{
            display: flex;
            justify-content: center;
            margin-top: -10px;
            left: 500px;
            visibility: hidden;
            position: absolute;
        }

        #parent:hover #div1 {
            visibility: hidden;
        }

        #parent:hover #div2 {
            visibility: visible;
        }
    </style>
    
</head>
<body>
    <div id="parent">
        <div id="div1">
            <h2>Move the cursor over the text to see it change.</h2>
        </div>

        <div id="div2">
            <h1>Move the cursor over the text to see it change.</h1>
        </div>
    </div>
    
</body>
</html>

内容的提问来源于stack exchange，提问作者John