親要素がホバーされているときに子要素をスタイルするにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-29 13:11:10

オリジナル

968 人が閲覧しました

How Can I Style a Child Element When Its Parent is Hovered?

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

親にマウスを置いたときに子要素の外観を変更する必要がありますか? 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 サイトの他の関連記事を参照してください。