CSS を使用して要素のホバーに関する追加情報を表示するにはどうすればよいですか?

マウスオーバーで要素を強調表示して追加情報を表示する方法

ドロップダウンを表示したいという問題に直面しています。特定の要素の上にマウスを移動すると、 - のような領域が表示されますが、指定したメソッドは期待どおりに機能しません。この問題の解決策を探ってみましょう。

1 つの方法は CSS を使用することですが、これは非表示の div がカーソルを置いている要素の直接の子である場合に限ります。方法は次のとおりです:

#cheetah {
  position: relative;
}

#hidden {
  position: absolute;
  display: none;
  background-color: black;
}

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

このコードでは、「#cheetah」 div の位置を「相対」に設定します。これにより、子要素をそれに相対的に配置できるようになります。次に、「#hidden」div の位置を「absolute」に設定し、その初期表示スタイルを「none」に設定します。 「#cheetah」の上にマウスを移動すると、「hover」セレクターを使用して「#hidden」の表示スタイルが「block」に変更され、背景色がオレンジ色に更新されます。

この方法はのみ機能することに注意してください。 「#hidden」div が、カーソルを置いている要素の直接の子である場合。この場合、CSS のみを使用して目的の機能を実現できます。それ以外の場合、目的の効果を得るには、JavaScript の使用など、他のアプローチを検討する必要がある場合があります。

以上がCSS を使用して要素のホバーに関する追加情報を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。