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/ - 但是当我在鼠标周围移动鼠标时，它显示/隐藏得像疯了一样......

我认为这与我的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();
    }
);

我用你的小提琴测试了这个，看起来还不错。

Answer 2

问题是因为当您只向toggle()提供一个函数时，会在mouseenter和mouseleave个事件上调用该函数 - further information

如果您更改代码以使用mouseenter()并向.file-hover元素添加另一个处理程序以隐藏它们mouseleave()，则它应该按照您的预期工作：

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

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

Updated 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();
});

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

3 个答案: