CSS を使用して、親要素にカーソルを置いたときに子要素のスタイルを設定するにはどうすればよいですか?

親のマウスオーバーで子要素をターゲットにする

質問:

できれば CSS を使用して、親要素にカーソルを置きますか?これは :hover セレクターで実現可能ですか?

答え:

はい、CSS はこの要件に対する簡単な解決策を提供します。 :hover 擬似クラスと子孫コンビネータを利用することで、ホバーされた親要素内の子要素を特にターゲットにすることができます。

.parent:hover .child {
   /* ... */
}

このルールでは、カーソルがホバーしているときに :hover 擬似クラスが .parent 要素に適用されます。その上に。次に、子孫コンビネータ (スペース) によって、.child クラスに一致する子孫要素が選択されます。これにより、親要素のホバーに応じて子要素のスタイルを変更できるようになります。

さらに、最新のブラウザは、色、色など、子要素に対して変更できる幅広い CSS プロパティをサポートしています。フォント、背景、トランジション。概念を説明するための例を次に示します。

.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;
}

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

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