子要素がホバーされているときに親要素のスタイルを設定するにはどうすればよいですか?

子要素のホバーによる親要素のスタイル設定

次のような特定のアクションが実行されるときに親要素にスタイルを適用するのは一般的な要件です。ホバリングは子要素で発生します。ただし、CSS はネイティブの親セレクターを提供しません。それでも、このようなセレクターを使用せずにこの機能を実現する創造的な方法があります。

擬似要素の利用

1 つのアプローチは、擬似要素を使用して親の周囲にラッパーを作成することです。要素。このラッパー疑似要素には、pointer-event プロパティを auto に設定して、マウス イベントを通過させることができます。一方、親要素では、pointer-event プロパティを none に設定できます。これにより、子要素の上にマウスを移動すると、親要素ではなくラッパー疑似要素でマウス イベントがトリガーされます。ラッパー擬似要素にホバー スタイルを適用すると、子要素にホバーしたときに親要素にホバー スタイルを効果的に適用できます。

コード例:

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

<div class="parent">
    parent - you can hover over here and it won't trigger
    <div class="child">hover over the child instead!</div>
</div>

追加注:

• pointer-events プロパティはすべてのブラウザーでサポートされているわけではないため、互換性を確保するためにブラウザー プレフィックス (-webkit-pointer-events など) を使用することが不可欠です。
• このテクニックは、要素の可視性の変更やトリガーなど、子要素のインタラクションに基づいて親要素のスタイルを設定する必要があるあらゆるシナリオに適用できます。アニメーション。

以上が子要素がホバーされているときに親要素のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。