web-dev-qa-db-ja.com

非表示の要素にカーソルを合わせて表示します

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

enter image description here

次に、矢印があるはずの領域にカーソルを合わせると、次のように表示されます。

enter image description here

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

javascriptjquerycssevents
23
Aaron

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

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

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

33
Blazemonger

非表示の要素または表示されていない要素にカーソルを合わせることができません。表示されている要素にカーソルを合わせ、それを使用して、以前は非表示になっていた別の要素を表示できます。または、透明な要素にカーソルを合わせて不透明にすることもできます。

これはCSSのみを使用した不透明度テクニックの例です。jQueryのホバーでも機能します。

CSS：

#it {
    opacity: 0;
    width: 500px;
    height:500px;
}

#it:hover {
    opacity: 1;
}

これは、別の要素にカーソルを合わせたときに1つの要素を表示する例です：

HTML：

<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>

jQuery：

$("#me").hover(function(){
   $("#else").show();
},function(){
   $("#else").hide();
});
10
Adam

使用 - .fadeTo ホバー状態で要素の不透明度を変更するjQueryメソッド。

JQueryサイトには例が含まれていますが、このようなもので十分です。

$("element").hover(//On Hover Callback
                   function() {$(this).fadeOut(100);} ,
                   //Off Hover Callback 
                   function() {$(this).fadeIn(500);})

jQuery Hover ページから。

6
msarchet

opacity: 0に設定できます。

クロスブラウザにするために、おそらくjQuerythoでそれを実行したいと思うでしょう。

4
Filip

これを行う1つの方法は、コンテンツがないように代替のヒットテストdivを使用することですが、カーソルを合わせると「矢印」divが表示されます。 「arrow」div（またはヒットテストdiv）が終了すると、「arrow」divは再び非表示になります。

または、ヒットテストと「矢印」に同じdivを使用して、divの視覚要素に背景画像を使用することもできます。ホバーすると、画像のオフセットを「矢印」が表示される位置に設定するように指示できます。終了したら、背景のオフセットを矢印画像が表示されなくなる位置に設定します。

そして最後に、コンテンツが常にヒットテスト領域と同じ位置にある場合は、divの不透明度をゼロに設定し、それに応じて切り替えることができます。

1
cwharris

要素の不透明度を0に設定できます。これにより、要素はホバーイベント（実際にはmouseenterとmouseleave）を受信できますが、実際問題として、ユーザーには見えなくなります。

0
dgvid