如何使不透明度为0的元素不可点击

Question

我知道这里有一个类似的问题：

CSS3 Element with Opacity:0 (invisible) responds to mouse events

但这个问题是不同的。

我正在尝试使用此处提到的 jQuery、CSS 为移动设备实现汉堡导航菜单：Demo。

这主要是有效的，但有一个问题。在上面的演示中，他们通过设置opacity:0 隐藏了一个已固定在顶部（top:0;left:0）的导航 div。虽然在上面的演示中这很完美，但当我实现它时，隐藏的 div 会响应点击并离开页面。

我不明白在上面的演示中这是如何被禁用的（仔细检查了 css / js 文件，但没有任何线索）。其他人有想法吗？我真的不能摆弄小提琴，因为我在 SharePoint 中尝试这个并且在小提琴中它可以工作。我只需要了解即使在使用opacity:0 时他们如何禁用点击事件，以便我可以复制它。谢谢。

Answer 1

您可以（至少）做两件事。您可以使用display: none; 或visibility: hidden; 代替opacity: 0;，或者您可以使用jQuery 中的preventDefault 函数来阻止菜单项可点击。

preventDefault 会像这样工作：

$("#hamburger").click(function(e){
  if ($(this).css('opacity')==0) e.preventDefault();
});

感谢 Popnoodles 上面的代码 (Hide clickable links inside div when opacity is 0)

编辑：我可能误解了你的问题，因为我现在让汉堡图标不可点击，而我认为你认为导航菜单需要不可点击，对吧？

应该是这样的：

$('a[class="nav-link"]').click(function(e){
  if ($(nav).css('opacity')==0) e.preventDefault();
});

将nav-link 类添加到导航菜单中的链接。

Answer 2

他们使用的实现是使用 z-index 属性来更改用户鼠标将引用的访问层。这意味着具有较低 z-index 的元素将位于具有较高 z-index 的元素的下层。请注意，z-index 的默认值为 1。只需为导航元素提供 z-index:-1; 和内容层 z-index:1 或更高以实现正确的反应。