Проблемы с наведением курсора на 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 или зависание (над, вне) .

Answer 2

Вероятно, самым простым решением было бы установить обработчик перехода с постепенным исчезновением на body и постепенный переход, как у вас сейчас.

Таким образом, событие отключения мышления, которое вы получаете, не приведет к тому, что что-то произойдет, и только когда вы отведете мышь от всей области, оно исчезнет.

Answer 3

Стрелки, вероятно, не являются потомками изображения, поэтому при наведении на них означает , оставив изображение.

Вы хотите обернуть изображение и стрелки элементом-оберткой и вместо этого вызвать элемент hover (). Таким образом, наведение курсора на изображение или стрелки вызывает его.

Либо научитесь использовать делегирование событий. Прикрепите hover () к более высокому элементу, который охватывает их обоих, а затем каждый раз проверяйте цель наведения. Если оно соответствует изображению или стрелкам, активируйте соответствующую анимацию на стрелках.

Это хороший учебник, объясняющий делегирование событий в jQuery и как его использовать.

Наконец, просто для простоты используйте hover () вместо mouseover () / mouseout (). Это отражает ваши намерения гораздо более четко. Первая функция, которую вы передаете hover (), применяется при наведении мыши, вторая применяется при наведении мыши.