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

親にマウスを合わせたときに子要素のスタイルを設定する

親にマウスを置いたときに子要素の外観を変更する必要がありますか? CSS の強力な :hover セレクターを入力します。

これを行うには:

.parent:hover .child {
  /* Styling for the child element when the parent is hovered */
}

このセレクターを使用すると、親「.parent」がホバーされているときに子要素をターゲットにします。子孫コンビネータ (スペース) は、「.child.」に一致する子孫を選択します。

例:

.parent:hover .child {
  background-color: #ccc;
}

これにより、親の上にマウスを移動すると、子要素の背景が灰色になります。

実際の例:

<div class="parent">
  <p class="child">Hover me</p>
</div>

.parent {
  border: 1px dashed gray;
  padding: 1em;
  display: inline-block;
}

.child {
  background-color: white;
  padding: 0.5em;
  transition: all 0.5s;
}

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

この例では、子要素の背景を次のように変更します。灰色で、親にホバーするとわずかに拡大されます。

ブラウザのサポートについてはここで説明していることに注意してください。 CSS を詳しく知り、ユーザー エクスペリエンスを向上させましょう!

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