鼠標移到元素上 - 在父元素或其他元素上執行某些操作/移除 - 撤消某些內容？

Question

我敢肯定，我錯過了這裏明顯的東西... 我把一個菜單，我想要下拉菜單項中的一個菜單項時，我也希望它保持打開，直到鼠標離開下拉區域，而不是離開菜單項目的時間。

JQUERY：

var hov = 1; 
$("#link-a").mouseover(function(){ 
    clearTimeout(); 
    hov = 1; 
    $("#dropdown").addClass("active"); 
}); 

$("#dropdown").mouseout(function(){ 
    hov = 0; 
    setTimeout(function(){ 
     if(hov == 0){ 
      $(this).removeClass("active"); 
     } 
    }, 300); 
}); 

HTML：

<div id="dropdown"> 
    <ul> 
     <li id="link-a">Link A</li> 
     <li id="link-b">Link B</li> 
     <li id="link-c">Link C</li> 
    </ul>    
</div> 

CSS：

#dropdown { 
    height: 0; 
} 
#dropdown.active { 
    height: 600px; 
} 

Answer 1

我認爲你真正想要的是mouseleave事件而不是mouseout

jQuery(function() { 
    $("#link-a").mouseover(function() { 
     $("#dropdown").addClass("active"); 
    }); 

    $("#dropdown").mouseleave(function() { 
     $(this).removeClass("active"); 
    }); 
}) 

演示：Fiddle

Answer 2

簡單的。你錯過了#表示「元素與ID。」在$("link-a")

$("#link-a").mouseover(function(){ 
    clearTimeout(); 
    hov = 1; 
    $("#dropdown").addClass("active"); 
}); 

Answer 3

var hov = 1; 
var timer; //declare variable named timer accessible to both function below 
$("#link-a").mouseover(function(){ 
//^missing # for id-selector 
    clearTimeout(timer); //clear timer 
    hov = 1; 
    $("#dropdown").addClass("active"); 
}); 

$("#dropdown").mouseout(function(){ 
    hov = 0; 
    timer = setTimeout(function(){ //assign setTimeout to variable timer 
     if(hov == 0){ 
      $(this).removeClass("active"); 
     } 
    }, 300); 
}); 

---

如果你想在所有的李標籤添加鼠標內部 #dropdown

$("#dropdown li").mouseover(function(){ 
    clearTimeout(timer); //clear timer 
    hov = 1; 
    $("#dropdown").addClass("active"); 
});