CSS 親セレクターを使用せずに、子ホバーで親要素のスタイルを設定するにはどうすればよいですか?

CSS 親セレクターを使用しない子ホバー上の親要素のスタイル設定

CSS には専用の親セレクターがないにもかかわらず、スタイルを設定することができます子要素のホバー状態に基づく親要素。カーソルを置くと親セクションを強調表示する「削除ボタン」の例を考えてみましょう。

効果的なアプローチの 1 つは、擬似ラッパーを使用することです。親を pointer-events: none に設定し、pointer-events: auto で子 div を作成することで、親と子を対象とするマウス イベントを区別できます。

次の CSS スニペットは、これがどのように行われるかを示しています。達成:

div.parent {
  pointer-events: none;
}

div.child {
  pointer-events: auto;
}

div.parent:hover {
  background: yellow;
}

このアプローチにより、CSS に専用の親がない場合でも、子要素のホバー状態に基づいて親要素のスタイルを設定できます。セレクター。

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