当鼠标未聚焦在某个项目或其同级项目上时，jQuery fadeOut

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/