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用于悬停效果，它可以直接用CSS应用于<div>，但我想你知道这一点，请参阅demo：

<强> FIDDLE

但是，为了使用.click()函数进行悬停效果以移除mouseenter, mouseleave上的不透明度，您可以使用类似的内容 - 请参阅demo：

<强> FIDDLE2

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

1 个答案: