Problem is introduced into

            <div class="div1">
                <div class="div2"></div>
            </div>
Copy the code
        .div1 {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: #bfa;
        }

        .div2 {
            width: 100px;
            height: 400px;
            position: absolute;
            top: 100px;
            opacity: 0;
            background-color: red;
        }

        .div1:hover .div2{
            opacity: 1;
        }
Copy the code

Results:



It was supposed to display div2 when moving into div1, but now it also displays div1 when moving into div2, because the event bubbles.

Use CSS to resolve event bubbling

Div2: pointer-Events: None; div2: pointer-Events: None; div2: Pointer-Events: None; Results:

Matters needing attention

Note: after moving into div1 and then moving into div2, div2 is not displayed. So if you want to display it after moving in, you have to use JS.