Javascript 如果将鼠标悬停在任一元素上，则使用JQuery

所以我有两个div。一个是“top”，一个是“menu”。在JQuery中将鼠标悬停在“top”上时，“menu”会淡入，如图所示：

$(".top").mouseover(function(){
    $(".menu").fadeIn(200);
});

$(".top").mouseout(function(){
    $(".menu").fadeOut(200);
});

---

但我想这样，如果我也在“菜单”上徘徊，“菜单”将保持淡入状态。如何执行此操作？

添加一个变量，该变量可记住您是否在菜单上悬停：

var isHoveringMenu;

$(".menu").mouseover(function(){
    isHoveringMenu = true;
});

$(".menu").mouseout(function(){
    isHoveringMenu = false;
    $(".menu").fadeOut(200); // you probably want this here
});

$(".top").mouseover(function(){
    $(".menu").fadeIn(200);
    isHoveringMenu = true; // not necessary, but sounds good
});

$(".top").mouseout(function(){
    if (!isHoveringMenu) {
        $(".menu").fadeOut(200);
    }
});

---

您可能需要对此稍作调整——最佳解决方案取决于两个div之间的空间关系，因此我们需要先查看布局。

我相信这会对您有所帮助。在隐藏菜单之前，它会等待半秒钟。如果此时用户将鼠标悬停在菜单上，则会取消隐藏操作

var timer;

$(".top").mouseover(function(){
    clearTimeout(timer);
    $(".menu").fadeIn(200);
});

$(".top, .menu").mouseout(function(){
    timer = setTimeout(function() {
        $(".menu").fadeOut(200);
    }, 500);
});

$(".menu").mouseover(function() {
    clearTimeout(timer);
});

---

此解决方案的问题在于，您假设mouseover事件将在mouseout事件触发“.top”之前触发“.menu”。以我的经验，这不是你可以依赖的。