Question

我有图像，鼠标悬停在两个箭头（左侧和右侧）上，然后在鼠标移开时，它会将这些箭头淡出。我的问题是，当用户将鼠标悬停在箭头上时，图像将其视为鼠标输出（因为箭头浮动在图像上方），并将箭头淡出，导致无限循环淡入/淡出，直到您移开鼠标。当鼠标悬停在箭头上时，防止箭头淡出的最佳方法是什么？我已经尝试了一种方法，你将在下面看到，但那还没有成功......

以下是一些代码：

$(".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)
    }
})

由于

对于那些对最终代码感兴趣的人：

$("#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，mouseleave或hover(over, out)。

Answer 2

箭头可能不是图像的子项，因此将鼠标悬停在会离开图像。

您希望使用包装器元素包装图像和箭头，并将hover（）调用放在该元素上。这种方式将鼠标悬停在图像或箭头上会触发它。

或者，了解如何使用事件委派。将hover（）附加到恰好包含它们的较高元素，然后每次检查悬停的目标。如果它与图像或箭头匹配，则在箭头上触发相应的动画。

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

最后，为了简单起见，使用hover（）而不是mouseover（）/ mouseout（）。它更清楚地捕捉您的意图。传递给hover（）的第一个函数在mouseover上应用，第二个函数在mouseout上应用。

Answer 3

可能最简单的解决方案是将淡出过渡处理程序放在body上，并将淡入淡出现在放在现在。

这样你所遇到的mouseout事件不会导致任何事情发生，只有当你离开整个区域时它才会淡出。

jQuery鼠标悬停问题

3 个答案: