親要素の上にマウスを移動したときに、非表示の要素の背景色を変更するにはどうすればよいですか?

CSS を使用したホバー時の要素の操作

インタラクティブな要素を作成しようとすると、CSS ホバー効果を理解するのが困難になります。具体的には、特定の要素の上にマウスを置いたときに追加情報を表示したいと考えていますが、提供されているコードは効果がないようです。

この問題を解決するには、CSS では要素にホバー効果のみを実装できることに注意してください。これらは、マウスを移動している要素の直接の子孫です。

次のコードを考えてみましょう。

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

a {
  color: blue;
}

#hidden {
  background-color: black;
}

a:hover > #hidden {
  background-color: orange;
  color: orange;
}

この中でスニペットでは、非表示の div は、カーソルを置いた要素 (テキスト「Cheetah」を含むアンカー タグ) 内に直接ネストされています。この変更により、アンカー タグの上にマウスを移動すると、非表示の div プロパティが確実に変更されます。

このコードのライブ デモは、次の URL でご覧いただけます: http://jsfiddle.net/LgKkU/

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