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

Question

我知道这里存在类似的问题：

  

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

但这个问题不同。

我正在尝试使用jQuery，如下所述的CSS实现移动设备的汉堡导航菜单：Demo。

这大部分都有效，但有一个问题。在上面的演示中，他们隐藏了一个导航div，它通过设置top:0;left:0固定在顶部（opacity:0）。虽然在上面的演示中这很有效，但是当我实现它时，隐藏的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();
});

以上代码（Hide clickable links inside div when opacity is 0）

对Popnoodles的信用 编辑：我可能误解了你的问题，因为我现在正在使汉堡包图标无法点击，而我认为导航菜单需要无法点击，对吧？

这应该是这样的：

$('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或更高版本提供正确的反应。