CSSを使用して親のホバー時に子要素のスタイルを設定するにはどうすればよいですか?

CSS を使用した子要素のホバー効果

親要素にホバーしたときに子要素のスタイルを変更するには、次の方法を使用できます。次の CSS テクニック:

.parent:hover .child {}

この CSS ルールは、:hover 疑似クラスを利用して、ホバー状態の親要素 (「.parent」) をターゲットにします。ルール内の子孫コンビネータ (スペース) は、「.child」クラスに一致する子孫要素を選択します。

このルールを適用すると、親のホバー ステータスに基づいて子要素のプロパティを変更できます。要素。たとえば、次のコード スニペットは、「.child」要素の背景色を変更し、「.parent」要素の上にマウスを置くと拡大します。

.parent:hover .child {
   background-color: #cef;
   transform: scale(1.5);
}

このアプローチでは、ブラウザ間の互換性が提供され、効果的に、親要素との相互作用に基づいて子要素のスタイルを設定できるようになります。

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