jquery .mouseover() mouseout() 项目出现

Question

我正在尝试让项目在鼠标悬停时隐藏自己，不幸的是，如果鼠标在项目上停留一段时间，它会一直显示。

知道我做错了什么吗？

我需要它在鼠标悬停在项目上时保持隐藏状态，并且仅在鼠标离开时显示。

$('#test').mouseover(function() {
  $('#test').hide();
});

$('#test').mouseout(function() {
  $('#test').fadeIn(500);
});

#test {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 10px;
  left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="test"></div>

jsfiddle demo

Answer 1

原因是隐藏元素会触发其鼠标离开功能，因为它在消失时会离开元素本身。

您可以添加包装元素，例如

<div id="demo">
    <div id="test"></div>
</div>

并在其上附加事件处理程序。

代码：

$('#demo').mouseover(function () {
    $('#test').hide();
});
$('#demo').mouseout(function () {
    $('#test').fadeIn(500);
});

演示：http://jsfiddle.net/04wL1rb9/15/

Answer 2

你的代码发生了什么很有趣，据我所知它应该可以工作。您试过只使用 CSS 吗？

    #test {
    width:100px;
    height:100px;
    background-color: blue;
    position: absolute;
    top: 10px;
    left: 10px;
    /* HOVER OFF */
    -webkit-transition: background-color 2s;
}
#test:hover {
    background-color: transparent;
    /* HOVER ON */
    -webkit-transition: background-color 2s;
}

您可以更改转换的时间。并且不要忘记禁用问题中包含的 jQuery 代码。和背景一样，你可以使用"display"。希望对您有所帮助。

Fiddle

Answer 3

使用容器 div 来解决这个问题。原因：当div消失时触发mouseout事件。

$('#container').mouseenter( function(){
  
       $('#test').fadeOut();
    console.log("enter");
 });
$('#container').mouseleave( function (){
        $('#test').fadeIn();
    console.log("leave");
});

#test {
     width:100px;
     height:100px;
     background: blue;
     
 }

#container{
       width:100px;
     height:100px;
    position: absolute;
     top: 10px;
     left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="test"></div>
</div>

jquery .mouseover() mouseout() 项目出现

jquery .mouseover() mouseout() item appears

jquery

mouseover

mouseout