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>