Почему переключение jQuery постоянно меняется при движении мыши / наведении

Question

Я только что получил этот фрагмент кода, работающий в jQuery через ответ здесь -

$('.folder-items a').hover(function(){
   $(this).siblings('.file-hover').toggle();
});​

.folder-items a находится в пределах li.Я хочу быть в состоянии навести на весь «li», а не только на фактический <a>, чтобы показать .file-hover div.

Я создал это в jsfiddle - http://jsfiddle.net/8Sefc/8/но когда я двигаю мою мышь вокруг li, она показывает / прячется как сумасшедшая ...

Я думаю, что это что-то не так с моим CSS и display: block;ширина: 100%;из li и li a, но не может найти другой способ сделать это ...

Идеи?

Answer 1

Тот факт, что элементы, которые должны быть показаны, находятся "сверху" навесного элемента, вызывает проблемы.В качестве альтернативы я бы предложил показывать элемент только при наведении, скрывая его, когда они выставлены:

$('.folder-items a').hover(function(){
    $(this).siblings('.file-hover').show();
}).siblings('.file-hover').hover(
    function() { },
    function() { $(this).hide(); }
);

Обновление: этоне идеальное решениеЕсли вы перемещаете мышь, как сумасшедшую, через itens, иногда они будут «прилипать» и не исчезать ... Может быть, лучшим решением было бы связать указатель мыши с элементом parent вместо:

$('.folder-items a').parent().hover(
    function(){
        $(this).children('.file-hover').show();
    },
    function(){
         $(this).children('.file-hover').hide();
         $(this).children('a').show();
    }
);

Я проверил это на твоей скрипке, и, похоже, все в порядке.

Answer 2

Проблема заключается в том, что когда вы поставляете toggle() только одну функцию, эта функция вызывается для событий mouseenter и mouseleave - дополнительная информация

Если вы изменитеваш код должен использовать mouseenter() и добавить другой обработчик к элементам .file-hover, чтобы скрыть их на mouseleave(), он должен работать так, как вы ожидаете:

$('.folder-items > li > a').mouseenter(function() {
    $(".file-hover").hide();
    $(this).siblings('.file-hover').show();
});

$(".file-hover").mouseleave(function() {
    $(this).hide();
});

Обновленоfiddle

Обновление Я также включил метод для устранения проблемы, упомянутой mgibsonbr, когда состояние наведения не удаляется, когда мышь быстро сканируется по элементам.

Answer 3

Ну, для начала я бы предложил изменить

$('.folder-items a').hover(function(){
    $(this).siblings('.file-hover').toggle();
});​

на что-то вроде

$('.folder-items a').hover(function(){
    $(this).siblings('.file-hover').show();
}, function(){
    $(this).siblings('.file-hover').hide();
});​