CSS で子要素のホバー時に親要素のスタイルを設定できますか?

子要素のホバーで親要素のスタイルを設定する

質問: 親要素の外観を変更することはできますか専用の親セレクターがなくても、子要素の上にマウスを移動したときCSS?

Context: 「削除」ボタンのあるシナリオを考えてみましょう。ユーザーがボタン上にカーソルを移動すると、そのボタンが含まれる親セクションを強調表示する必要があります。

答え:

真の親セレクターは存在しませんが、 CSS では、カスケード レイヤー (z-index) またはpseudo-wrappers.

擬似ラッパー メソッド:

このメソッドには、親の上に非表示のレイヤーとして機能する擬似ラッパー要素の作成が含まれます。マウスを子要素の上に置くと、擬似ラッパーと対話し、親要素の CSS 変更がトリガーされます。

コード:

div.parent {
  z-index: 0;
}

div.child {
  z-index: 1;
  pointer-events: auto;
}

div.child:hover + div.parent {
  background-color: yellow;
}

説明:

• 低い値を割り当てます子の下にあることを確認して、親の z-index を設定します。
• 子には、より高い z-index と pointer-events が auto に設定されており、マウス イベントが通過できるようになります。
• When子がホバーされていると、隣接する兄弟セレクター ( ) が親をターゲットにし、黄色の背景色を適用します。

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