☰

CSS のみを使用して、別の要素にマウスを移動したときに div を表示する 質問する

tag-icon • tag-icon css
CSS のみを使用して、別の要素にマウスを移動したときに div を表示する 質問する

誰かが要素の上にマウスを置いたときに div を表示したいのです<a>が、これを JavaScript ではなく CSS で行いたいです。これを実現する方法をご存知ですか?

ベストアンサー1

次のようなことができますこれ:

div {
    display: none;
}
    
a:hover + div {
    display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>

これは、隣接兄弟セレクター、そしての基礎となるスッケーフィッシュドロップダウンメニュー。

HTML5 では、アンカー要素がほぼすべてのものをラップできるため、その場合、div要素をアンカーの子にすることができます。それ以外の場合、原理は同じです。疑似クラスを使用して、別の要素のプロパティ:hoverを変更します。display

おすすめ記事