☰

隠れた要素にマウスを合わせると表示されます 質問する

tag-icon • tag-icon javascript jquery css events
隠れた要素にマウスを合わせると表示されます 質問する

すでに非表示になっている要素にマウスを合わせる方法はありますか。Steam のホームページの矢印ナビゲーションを真似しようとしています。最初にページにアクセスしたときに矢印が表示されていないことに気付くでしょう。

ここに画像の説明を入力してください

次に、矢印があるはずの領域にマウスを移動すると、矢印が表示されます。

ここに画像の説明を入力してください

矢印画像を含む div を に設定したりdisplay: none、 を試したりしましたがvisibility: hidden、どちらも jQuery の hover メソッドや mouseover メソッドでは機能しないようです。visibility: hidden機能すると思っていたのですが、そうではないようです。これらの div を最初から非表示にして、それでも hover イベントを機能させる方法は他にありませんか?

ベストアンサー1

代わりに不透明度をゼロに設定します:

$('#blah').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});

http://jsfiddle.net/mblase75/bzaax/

おすすめ記事