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

親要素のホバー時に子要素のスタイルを調整する

CSS を使用して、親要素をホバーしたときに子要素のスタイルを変更できます。これを実現するには、:hover 疑似クラスを使用します。

.parent:hover .child {
  /* Styles applied here will affect child elements when the parent is hovered */
}

このルールは、現在ホバーされている親要素内のすべての子要素を選択します。中括弧内に適用されるスタイルは、親要素がホバーされている場合にのみ子要素に適用されます。

たとえば、親メニュー項目がマウスオーバーされているときにドロップダウン メニューの色を変更する必要がある場合。ホバーされた場合は、次の CSS を使用できます:

.menu-item:hover .drop-down-menu {
  background-color: #ccc;
}

これにより、対応するメニュー項目がホバーされたときにドロップダウン メニューの背景色が明るい灰色に変更されます。ユーザーへの視覚的な合図。

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