在懸停時顯示疊加層，但點擊刪除移動設備上的疊加層

Question

我的網站上有一個導航菜單。菜單很大程度上由CSS控制，除了使用jQuery的疊加層。當用戶將鼠標懸停在菜單項上時，會在整個頁面上顯示疊加層以使其變暗，並使菜單更清晰可見。這在桌面上運行良好，但在移動設備上，疊加層一旦被激活就不會消失，這可以防止用戶點擊網站上的任何內容。這裏是我的代碼：

jQuery的

jQuery("#meganav").on("mouseenter", 
    function() { 
    jQuery("#meganav-overlay").addClass("meganav-overlay").css({opacity: 0.2}).show(); 
}).on("mouseleave", function() { 
jQuery("#meganav-overlay").removeClass("meganav-overlay").hide();  
}); 

HTML

<div id="meganav-overlay"></div> 

我想解決這個問題，如果用戶點擊將關閉覆蓋最自然的方式它（即如果他們點擊屏幕上的任何地方除了菜單）。有人能幫我實現嗎？或者，有沒有更好的方法來編碼上述？

非常感謝，

凱蒂

Answer 1

你不需要jQuery的懸停效果，它可以應用到<div>直接與CSS，但我想你知道這一點，請參閱演示：

FIDDLE

---

但是，爲了使懸停效果與.click()功能來消除已不透明度mouseenter, mouseleave，你可以使用這樣的事情 - 看演示：

FIDDLE2