html - 最高 Z-index 但无法点击图像 href

Question

我正在创建这个网站: https://www.melkerhei.be/smeltkroes/index.html

左上角的标志应该是可以点击的。这是代码:

  <header>
    <div class="header">
      <div class="logo_box_top" style="z-index:20">
                 <a href="index.html" style="z-index:20">
                          <img src="assets/img/logo.png" alt="Smeltkroes">
                  </a>
      </div>
    </div>
  </header>

也许中间的导航栏挡住了路。我通过更改元素的位置和 z-index'es 进行了很多尝试，但没有任何效果。我该如何解决这个问题？

Answer 1

在 .header 类上使用 pointer-events: none，默认情况下，所有子级也将禁用指针事件。

pointer-events: none; 的文档指出:

The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

如果您有特定原因，可以保留此设置，如果您希望子项可点击，则可以在子项上设置一个显式指针事件值。不过，您可能不需要它，可以将其删除。

引用:https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

编辑

根据您的意见，这是您的解决方案:

• 保留 pointer-events: none; 在 .header 类中。
• 将 pointer-events: all; 添加到 header 中的 anchor 元素。

然后您仍然可以单击标题链接而不影响其他图层。