javascript - jQuery 鼠标悬停问题

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) .