激活定時鼠標懸停後的彈出式菜單，然後在鼠標懸停後取消激活

我試圖讓鼠標懸停在某個元素上一段時間後出現一個菜單。如果您將鼠標懸停在此元素上，但在設定的時間之前彈出鼠標，菜單將不會顯示。這個想法是防止用戶在快速移動鼠標時偶然激活菜單。激活定時鼠標懸停後的彈出式菜單，然後在鼠標懸停後取消激活

默認情況下，我的CSS中的菜單設置爲display:none;。然後，當他們成功地徘徊足夠長的時間，我想補充一類.active將其設置顯示器block.

我的問題是，一旦鼠標懸停在元素足夠長的時間（在我的測試情況下，我已經將它設置爲1秒），將鼠標移到新顯示的菜單上作爲鼠標移動，我就失去了菜單。我曾假設，因爲菜單是我聽到的元素的一個子元素，它仍然算作元素上的元素。我猜錯了！

Amazon.com's main menu是我試圖實現的一個很好的例子。

這是我的HTML。

<div id="drop-nav-trigger"> 
    Menu 

    <div class="drop-nav"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
    </div> 

</div>

這裏是我的javascript。我有一些jQuery混亂在那裏改變我的菜單類。

var timeoutId = null; 
var el = document.getElementById("drop-nav-trigger"); 

/* Activate menu after a delay. */ 
el.addEventListener('mouseover',function() { 
        timeoutId = window.setTimeout(function(){ 

    $(".drop-nav").addClass("active"); 

    }, 1000); 
}); 

// Cancel action if mouse moved out within 2 sec 
el.addEventListener('mouseout',function() { 
    window.clearTimeout(timeoutId); 
    $(".drop-nav").removeClass("active"); 
});

這裏是一個codepen：http://codepen.io/jimmykup/pen/EVYbWx

來源

2015-08-28 jkupczak

的tirck是使用mouseleave代替mouseoutSee Example

MouseLeave事件從鼠標移出不同的方式，處理事件冒泡。如果在此示例中使用了鼠標指針，那麼當鼠標指針移出Inner元素時，處理程序將觸發。這通常是不受歡迎的行爲。另一方面，mouseleave事件只在鼠標離開它綁定的元素時才觸發其處理程序，而不是後代。所以在這個例子中，當鼠標離開Outer元素時觸發處理程序，但不是內部元素的。

來源：http://api.jquery.com/mouseleave/

來源

2015-08-28 01:15:15 DDan

激活定時鼠標懸停後的彈出式菜單，然後在鼠標懸停後取消激活

回答

相關問題