为什么jQuery切换不断改变鼠标移动/悬停

Question

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

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

的.folder-items一个是利内.我希望能够悬停整个'li',而不仅仅是在实际上<a>显示.file-hoverdiv.

我已经在jsfiddle中创建了这个 - http://jsfiddle.net/8Sefc/8/ - 但是当我将鼠标移动到li时它会像疯了一样显示/隐藏...

我认为这与我的CSS和显示有关:块; 宽度:100%; 李和李的一个,但不能解决另一种方式这样做...

想法？

Answer 1

要显示的元素位于悬停元素"顶部"的事实导致了麻烦.我建议,作为替代,在悬停时只显示元素,隐藏他们的时候,他们都徘徊了:

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

更新:这不是一个完美的解决方案.如果你疯狂地移动你的鼠标,有时它们会"坚持"而不会消失......也许更好的解决方案是将悬停绑定到父元素:

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

我用你的小提琴测试了这个,看起来很好.