使用pointer-events: none解决CSS事件冒泡

2021-12-07 2,834 阅读1分钟

问题引入

            <div class="div1">
                <div class="div2"></div>
            </div>

        .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;
        }

结果：

动画.gif
本意是移入div1时，显示div2，但是现在移入div2时，也会显示div1，产生的原因就是事件冒泡。

使用CSS解决事件冒泡

方式：给div2添加上pointer-events: none即可，它的作用是元素不对指针事件做出反应。
结果：

动画.gif

注意事项

注意：移入div1之后，再移入div2时，div2就不会显示了。所以如果要在移入之后还能显示，就只能使用JS了。