mouseOver（）有趣的行爲

Question

我很好奇爲什麼藍色<div>消失時，我將鼠標從標題上鼠標移開，而不是隻有在關閉整個<div>時消失。

$("#yw1 .portlet-title").mouseover(function(){ 
    $("#yw1 .portlet-content").slideDown('fast'); 
}); 


$("#yw1").mouseout(function(){ 
    $("#yw1 .portlet-content").slideUp('fast'); 
}); 

Here's a demo jsFiddle.

Answer 1

的原因是mouseout事件泡沫，也就是說，當你的鼠標的任何孩子，祖先仍然會收到該事件。您可以通過針對當前目標檢查目標來解決此問題（this）。 Here's an updated jsFiddle.

$("#yw1").mouseout(function(e) { 
    if(e.target === this) { 
     $("#yw1 .portlet-content").slideUp('fast'); 
    } 
}); 

Answer 2

使用jQuery的mouseleave代替鼠標移開。

Answer 3

原因是鼠標事件冒泡並隱藏。使用mouseneter和mouseleave事件來解決這個問題。

$("#yw1 .portlet-title").mouseenter(function(){ 
    $("#yw1 .portlet-content").slideDown('fast'); 
}); 


$("#yw1").mouseleave(function(){ 
    $("#yw1 .portlet-content").slideUp('fast'); 
}); 

Demo