jQueryマウスオーバーの問題

Question

私はイメージを持っていて、その上にマウスを置くと、2つの矢印（左右の側）にフェードし、マウスアウトするとそれらの矢印が消えます。私の問題は、ユーザーが矢印上を移動すると、画像がマウスオーバー（矢印が画像の上に浮いているため）とみなし、矢印を消して、マウスを移動するまでフェードイン/アウトの無限ループを引き起こします。マウスがマウスの上を移動するときに矢が消えないようにする最良の方法は何ですか？興味がある人のために

$(".arrow").mouseover(function() { 
    overArrow = 1; 
    $("#debug_oar").text(1) 
}) 

$(".arrow").mouseout(function() { 
    overArrow = 0; 
    $("#debug_oar").text(0) 
}) 

$("#image").mouseout(function() { 
    $(".arrow").fadeOut(250,function() { $(".arrow").remove();}) 
}) 

$("#image").mouseover(function() { 
    if(overArrow == 0) { 
     $("#image").after("<div class='arrow' id='lArrow' style='display:none;position:absolute;'>&larr;</div><div class='arrow' id='rArrow' style='display:none;position:absolute;'>&rarr;</div>") 
     // Define variables... 
     aWidth = $("#lArrow").width(); 
     aHeight = $("#lArrow").height(); 
     height = $("#image").height() 
     width = $("#image").width() 
     pos = $("#image").position(); 
     // Calculate positioning 
     nHeight = height/2 
     y = pos.top + nHeight - (aHeight/2) 
     // Position the left arrow 
     $("#lArrow").css("top",y) 
     $("#lArrow").css("left",pos.left+10) 
     // Now the right... 
     $("#rArrow").css("top",y) 
     $("#rArrow").css("left",pos.left+width-aWidth-20) 
     // Display 'em 
     $(".arrow").fadeIn(250); 
     // Debug info 
     $("#debug_x").text(pos.left) 
     $("#debug_y").text(y) 
     $("#debug_height").text(height) 
    } 
}) 

おかげ

：ここ

は、いくつかのコードだ...私はあなたが以下を参照してくださいよ一つの方法を、試してみたが、それはワークアウトされてhasen't

$("#image").mouseenter(function() { 
    $("#image").append("<div class='arrow' id='lArrow' style='display:none;position:absolute;'>&larr;</div><div class='arrow' id='rArrow' style='display:none;position:absolute;'>&rarr;</div>") 
    // Define variables... 
    aWidth = $("#lArrow").width(); 
    aHeight = $("#lArrow").height(); 
    height = $("#image").height() 
    width = $("#image").width() 
    pos = $("#image").position(); 
    // Calculate positioning 
    nHeight = height/2 
    y = pos.top + nHeight - (aHeight/2) 
    // Position the left arrow 
    $("#lArrow").css("top",y) 
    $("#lArrow").css("left",pos.left+10) 
    // Now the right... 
    $("#rArrow").css("top",y) 
    $("#rArrow").css("left",pos.left+width-aWidth-20) 
    // Display 'em 
    $(".arrow").fadeIn(250); 
    // Debug info 
    $("#debug_x").text(pos.left) 
    $("#debug_y").text(y) 
    $("#debug_height").text(height) 
}); 
$("#image").mouseleave(function() { 
    $(".arrow").fadeOut(250,function() { $(".arrow").remove();}) 
}) 

Answer 1

てみあなたのイベントにstopPropagation()を呼び出し、またはmouseenter、などのデフォルトで伝播を停止し、代替イベントを使用するには、：最終的なコードでまたはhover(over, out)である。

Answer 2

矢印はおそらく画像の子ではないため、をホバリングすると、画像が残るになります。

イメージと矢印をラッパー要素でラップし、代わりにその要素にhover（）コールを入れたいとします。そうすることで、画像や矢印の上にカーソルを置くと、その画像がトリガされます。

代わりに、イベント委任の使い方を学んでください。 hover（）を取り囲む上位の要素に貼り付け、毎回ホバーのターゲットを確認します。画像または矢印のいずれかと一致する場合は、矢印で適切なアニメーションをトリガーします。

This is a good tutorial explaining event delegation in jQuery and how to use it.

最後に、ただ単純、使用ホバー（）よりもむしろマウスオーバーのための（）/マウスアウト（）。あなたの意図をもっとはっきりと捕らえます。 hover（）に渡す最初の関数はマウスオーバー時に適用され、2番目の関数はmouseoutで適用されます。

Answer 3

おそらく最も簡単な解決策は、フェードアウトトランジションハンドラをbodyとフェードインにすることでしょう。

このようにして、マウスオーバーイベントが発生することはありません。マウスを離れた場所からマウスを離すと消えます。