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

Question

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

我有3个元素

第一个重叠（更高的索引）第二个，第二个重叠第三个...

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

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

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

第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不支持它。