css - 2 番目の hover プロパティをブロックしないように、別の div ボックスにインデックスを付けた div ボックスを作成するにはどうすればよいですか?

Question

質問にコードを含めるつもりはありません。

私は3つの要素を持っています

1 番目は 2 番目と 2 番目と 3 番目に重なっています (インデックスが高い)。

3番目の要素はメニューボタンで、ホバー時にイベントをトリガーする必要があります

しかし、1番目のサイズは3番目のホバープロパティをブロックします。

では、どのようにして最初の要素をより高いスタッキング インデックス順のままにして、

3番目に完全に「ホバー可能」？

Answer 1

pointer-events: none;より高いインデックス付きの div で使用できます。

<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 はサポートしていません。