Question

我有两个divs彼此靠近。当我将鼠标悬停在div一上时，div二显示。

如果我不将鼠标悬停在div两个上，它应该淡出。或者，如果我将鼠标从div移动到其他地方，那么div两个应该淡出。

$(".one").mouseover(function () {
    $(".two").show();
});
$(".two").mouseleave(function () {
  $(".two").fadeOut(1);
});

Js Fiddle

Answer 1

您可以在正文上添加mouseover事件，并根据当前目标执行操作。如果鼠标悬停在身体的任何位置.one和.two

，这将关闭/隐藏元素

$("body").mouseover(function (e) {
    if(!($(e.target).is('.one') || $(e.target).is('.two'))){
        $(".two").fadeOut();
    }
});

<强> Updated Fiddle

Answer 2

更新了您的Fiddle。

您可以使用其他父div并将事件绑定到它，而不是.one和.two。

Answer 3

检查一下。

$(".one").hover(function () {
$(".two").show();
},function(){
   if($(".two:hover").length==0) {
    $(".two").fadeOut();
}else{
    $(".two").mouseleave(function () {
        $(".two").fadeOut();
    });
}
});

Answer 4

我是靠自己做的。

$(".one").mouseover(function () {
    $(".two").show();
});
$(".one").mouseleave(function () {
    if($(".two").is(":hover")){
    }else{
        $(".two").fadeOut();
    }
});
$(".two").mouseleave(function () {
    if($(".one").is(":hover")){
    }else{
        $(".two").fadeOut();
    }
});

Updated Js Fiddle

如果用户没有将鼠标悬停在显示的div上，我该如何隐藏显示的div

4 个答案: