Question

您好我正试图隐藏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

Answer 1

只需使用mouseleave事件。

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

JS Fiddle

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

使用mouseleave，当您将一个document的孩子悬停时，不会触发此事件。

Answer 2

看小提琴; http://jsfiddle.net/xibalbian/UaJZr/

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

如果匹配的元素没有子元素，则mouseout（）和mouseleave（）事件的工作方式完全相同。

如果匹配的元素具有子元素，则mouseout（）和mouseleave（）事件的工作方式与“事件冒泡”不同。

你可以看到这个清楚解释的页面 - ＆gt; Difference between mouseout() and mouseleave()

Answer 3

使用mouseleave事件。 jsfiddle

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

Answer 4

访问：JsFiddle

/* Do not use equal time in hide and show: */

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

鼠标输入事件无法正常工作

4 个答案:

JS Fiddle