时间戳

首页 > 解决方案 > 最高 Z-index 但无法点击图片 href

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

问题描述

我正在创建这个网站： 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 进行了很多尝试，但没有任何效果。我该如何解决这个问题？

标签： htmlcssz-index

解决方案

在课堂pointer-events: none上.header，所有孩子也将默认禁用指针事件。

状态的文档pointer-events: none;：

元素永远不是指针事件的目标；但是，如果这些后代将指针事件设置为其他值，则指针事件可能会针对其后代元素。在这些情况下，指针事件将在事件捕获/冒泡阶段期间适当地触发该父元素上的事件侦听器。

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

在此处输入图像描述

参考：https ://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

编辑

根据您的评论，这是您的解决方案：

  • 离开课堂pointer-events: none;。.header
  • 添加pointer-events: all;到标题中的锚元素。

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

推荐阅读