javascript - 鼠标进入事件无法正常工作

嗨，我正在尝试在鼠标上隐藏div到身体上，它无法正常工作，我试图隐藏的div将隐藏并再次出现。签出fiddle

这是我的代码：

JS：

$(document).mouseenter(function() {
    $('.jadu').hide(10);
  }).mouseout(function(){
    $('.jadu').show(10);
  });

HTML：

<div class="jadu"></div>

CSS：

*{padding:0px;margin:0px;}
.jadu{
    position:fixed;
    width:100%;
    height:100%;
    background-color:#555;
    opacity:0.8;
    display:block;
    z-index:3;
}
body{
    background:red;
}

这是小提琴链接：Fiddle

最佳答案

只需使用mouseleave事件。

$(document).mouseenter(function() {
    $('.jadu').hide(10);
  }).mouseleave(function(){
    $('.jadu').show(10);
  });

JS Fiddle

当在元素上使用mouseout且其中有一个子元素（document > .jadu）时，将鼠标悬停在.jadu元素（子元素）时会触发mouseout事件。

使用mouseleave，将鼠标悬停在document的子级时不会触发此事件。