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

親セレクターを使用せずに子ホバーで親要素をスタイリングする

CSS では、子のインタラクションに基づいて親要素を直接ターゲットにするのは困難です。親セレクターがありません。ただし、この効果を実現できる賢い回避策があります。それは、親要素内に疑似ラッパーを作成することです。

次の例を考えてみましょう。ここで、削除ボタンにカーソルを合わせると、その親セクションが強調表示されます。

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

親セクションを強調表示するには、pointer-events を auto に設定して子 div を作成し、それを無効にします。親:

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

これで、親はマウス イベントに対して透明になり、子 div がホバー効果をトリガーできるようになります。また、子上でホバー イベントが発生すると、必要に応じて親のスタイルを設定できます。

div.parent:hover {
    background: yellow;
}

この手法により、親要素が子上のホバー インタラクションに確実に応答し、親セレクターの動作を効果的にシミュレートできます。機能を維持するには、イベント リスナーを持つ他の子要素に対して pointer-events: auto を復元する必要があることに注意してください。

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