jquery - 为什么 jQuery 切换在鼠标移动/悬停时不断变化

Question

我刚刚通过此处的答案在 jQuery 中使用了这段代码 -

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

.folder-items a在一里之内。我希望能够悬停整个“li”，而不仅仅是悬停在实际的 <a> 上。显示.file-hover分区

我在 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 上，有时它们会“粘住”而不是消失......也许更好的解决方案是将 hover 绑定(bind)到 parent 元素:

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

我用你的 fiddle 测试了这个，看起来没问题。