親要素の上にマウスを置いたときに子要素のスタイルを設定するにはどうすればよいですか?

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

さまざまなシナリオで、ユーザーが親要素の上にマウスを置いたときに子要素のスタイルを変更することが望ましい。これは主に CSS ソリューション、特に :hover pseudoclass セレクターを利用して実現できます。

たとえば、ユーザーがパネル上にマウスを置いたときにパネル内のオプション バーの色を変更したい場合、CSS は次のことを提供します。直接的なアプローチ:

.parent:hover .child {
  /* Style for child element on hover */
}

このスニペットは、:hover 疑似クラスを使用して、スタイルの変更が子要素 (.child) にのみ適用されることを指定します。親要素 (.parent) にカーソルが置かれます。子孫コンビネーター (スペース) を使用すると、子セレクターに一致する親要素の子孫を選択できます。

この実際の例を考えてみましょう:

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

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

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

このコードは背景を変更します。色、スケールの変換、親要素の上にマウスを置いたときの子要素の差し込み境界線の調整を行い、この場合の CSS の有効性を示しています。コンテキスト。

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