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代码。与背景一样，您可以使用“显示”。我希望这有帮助。

Fiddle

Answer 3

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

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

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

 
#container{ 
 
     width:100px; 
 
\t  height:100px; 
 
    position: absolute; 
 
\t  top: 10px; 
 
\t  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>