Question

我有一个ID为basket的元素，当moused-over显示另一个元素但该元素既不是第一个元素的直接兄弟，也不是第一个元素的直接兄弟。我希望这是有道理的。

当我将鼠标移出第一个或第二个元素时，我希望第二个元素淡出，但我似乎无法找到向Jquery解释这一点的方法。

继承人我正在使用的Jquery： -

$("#basket").mouseenter(function(){
    $("#cartContents").fadeIn("slow");
});
$("#basket").mouseout(function(){
    $("#cartContents").fadeOut("slow");
});

在第二条规则中，我想添加类似“如果鼠标没有悬停在#cartContents上只做这一点”

任何人都可以告诉我我需要做些什么来实现这个/

提前致谢

Answer 1

您需要将悬停检查添加到现有代码中才能使其正常运行...

$("#basket").mouseenter(function(){
    $("#cartContents").fadeIn("slow");
});
$("#basket, #cartContents").mouseout(function(){
    if ($("#basket").is(":hover") || $("#cartContents").is(":hover")) return;
    $("#cartContents").fadeOut("slow");
});

当你离开其中任何一个时，它只检查篮子和推车的悬停状态，如果你没有超过其中任何一个，它们就会淡出。

这是一个有效的例子......

http://jsfiddle.net/fCxrr/1/

Answer 2

第二个问题的答案是当鼠标悬停在cartContents上时取消绑定事件，并在鼠标离开cartContents时重新绑定它。只需查看jquery的bind（）和unbind（）方法，并使用mouseenter，mouseout或hover来绑定/取消绑定事件。

jQuery fadeOut当鼠标没有聚焦在一个项目或它的兄弟

2 个答案: