Угасание / исчезновение элемента в div с наведением курсора мыши на / за пределы div

извините за дурацкое название, я не мог придумать ничего другого, и мне очень жаль, если кто-то уже спросил об этом, я не смог его найти.

Во всяком случае, я делаю галерею с помощью jQuery. У меня есть div, изображение и кнопки «предыдущий / следующий» внутри этого div. Кнопки расположены над изображением, и я хочу, чтобы они были скрыты по умолчанию, чтобы они появлялись, когда я наводил указатель мыши на div, и исчезали, когда я выводил мышь из div. Проблема в том, что когда я перемещаю мышь с изображения на кнопку, javascript регистрирует это как событие mouseout, хотя я на самом деле не покидал div, который содержит изображение и кнопки. Я быстро сделал скрипку, чтобы показать вам, что происходит: http://jsfiddle.net/7Ppbm/

Есть ли у кого-нибудь решение этой проблемы? Спасибо


jquery mouseover gallery fade mouseout
person tuks    schedule 29.08.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вам следует использовать функцию hover:

$("#button").hide();

$("#container").hover(function(){
    $("#button").fadeIn();
},function(){
    $("#button").fadeOut();
});
person core1024    schedule 29.08.2012

arrow_upward
0
arrow_downward

Чего вам не хватает, так это тайм-аута, который не даст ему просто исчезнуть снова и снова. Также в качестве побочного примечания используйте .on(), который является новым для jQuery 1.7.2

$("#button").fadeOut();
var timer;

$("#container img").on({
    mouseover: function () {
        clearTimeout(timer);
        $("#button").fadeIn();
    },
    mouseout : function () {
        timer = setTimeout(function () { 
            $("#button").fadeOut();
        }, 100);
    }
});

jsFiddle обновлен

person Mark Pieszak - Trilon.io    schedule 29.08.2012
comment
Обновил, просто увидел, что сейчас - person Mark Pieszak - Trilon.io; 29.08.2012
comment
Это обходной путь, но он слишком сложный, в любом случае спасибо за ваши усилия! :) - person tuks; 29.08.2012

arrow_upward
0
arrow_downward

Почему бы не сделать это с помощью переходов CSS? Они поддерживаются везде, кроме IE ‹10. http://caniuse.com/#search=transition

Ваш пример изменен: http://jsfiddle.net/b4e4M/

person piatek    schedule 29.08.2012
comment
Потому что я спросил, как это сделать с помощью JavaScript. - person tuks; 05.09.2012