Question

我试图让物品隐藏在鼠标上，不幸的是，如果鼠标在物品上停留一段时间，它会一直显示出来。

知道我做错了什么吗？

当鼠标停留在项目上时我需要保持隐藏状态，并且仅在鼠标移出时显示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jsfiddle demo

Answer 1

令人感兴趣的是你的代码发生了什么，它应该在我所知的范围内工作。您是否尝试过使用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代码。就像我用背景一样，你可以使用“显示”。我希望这会有所帮助。

Fiddle

Answer 2

使用容器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>

Answer 3

原因是隐藏元素会触发鼠标离开函数，因为它会在消失时自行离开元素。

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

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

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

代码：

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

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

出现jquery .mouseover（）mouseout（）项

3 个答案: