在悬停时显示叠加层，但点击删除移动设备上的叠加层

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