当鼠标未聚焦在项目上或其同级项目时，jQuery 淡出

Question

我有一个ID为basket的元素，当鼠标悬停在另一个元素上时，会显示该元素，但该元素既不是第一个元素的子元素，也不是第一个的直接兄弟元素。我希望这是有道理的。

当我鼠标移出第一个或第二个元素时，我希望第二个图元淡出，但我似乎想不出向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上时，解除事件绑定，当鼠标离开cartContent时，重新绑定。只需查看jquery的bind（）和unbind（。