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

親セレクターを使用せずに子ホバーで親要素をスタイル設定する

CSS には専用の親セレクターがありませんが、子要素のスタイルを設定することは可能です。要素がホバーされます。このシナリオでは、コンテナ要素に含まれる 削除 ボタンがマウスの上に置かれたときにコンテナ要素を強調表示することを目的としています。

HTML マークアップを検討します。

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

親なしセレクターでは、疑似ラッパーの概念を活用して、目的の効果を実現できます。ポインターイベントを設定することにより、次のようになります。親要素とポインターイベント: auto;子要素 (擬似ラッパー) で、トリガー メカニズムを作成できます。

これを実装する CSS コードは次のとおりです:

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

注: 子要素に独自のメカニズムが設定されていることを確認してください。イベント リスナーでは、クリック機能を維持するためにポインター イベントが auto に設定されています。

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