如何使索引在另一个 div 框上不阻止第二个的悬停属性

Question

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

我有 3 个元素

第一个重叠（更高的索引）第二个和第二个重叠第三个。

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

但是 1rst 的大小会阻止第 3 个的悬停属性。

那么我怎样才能将 1rst 元素保留在更高的堆叠索引顺序上并拥有

第三个完全"悬停"？

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>

现场示例

点

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