CSS を使用して、親要素の上にマウスを移動したときに子要素のスタイルを変更するにはどうすればよいですか?

CSS を使用したホバー時の要素の変更

特定の要素の上にホバーするときに、別の要素に変更を加えることができます。これは CSS を通じて実現できますが、非表示の要素がホバーされた要素の子である場合に限ります。

次の例を考えてみましょう:

<div>

非表示の div の背景色を変更するにはチーター div にカーソルを置くときに、次の CSS を追加します:

#cheetah {
  background-color: red;
  color: yellow;
  text-align: center;
}

a {
  color: blue;
}

#hidden {
  background-color: black;
}

#cheetah:hover #hidden {
  background-color: orange;
  color: orange;
}

を指​​定することで#cheetah:hover #hidden では、チーターの div にカーソルを置いた場合にのみ、非表示の div が選択されます。これにより、他の要素に影響を与えることなく外観を変更できます。

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