css - 我怎样才能使一个在另一个上索引的 div 框不阻止第二个的悬停属性？

Question

好吧，我不会在我的问题中包含任何代码，

我有3个元素

第一个重叠(更高的索引)第二个和第二个重叠第三个..

第三个元素是一个菜单按钮，它必须在悬停时触发一个事件

但是第一个的大小阻止了第三个的悬停属性。

那么我怎样才能将第一个元素留在更高的堆叠索引顺序上并让

第三次完全“悬停”？

Answer 1

您可以在索引较高的 div 上使用 pointer-events: none;:

<style type="text/css">
    div {
        position: absolute;
    }

    .over {
        z-index: 10;
        pointer-events: none;
        background: white;
    }

    .under:hover {
        height: 100px;
        background: red;
    }
</style>


<div class="over">Lorem Ipsum</div>
<div class="under">Dolor sit amet</div>

Live Example

积分

• 这将使 .over div 完全无法交互。您将无法使用任何点击/悬停/任何事件。不涉及鼠标。
• IE 和 Opera 不支持它。