仅在显示 div 的活动时阻止在 Firefox 中执行 link

Question

一个 <a href> 元素包围两个 div。如果 link 处于活动状态（单击时刻），则仅显示 div 之一。它位于另一个 div 之上。它用作点击的反馈。

您可以在此处查看并尝试：https://jsfiddle.net/pjgdtade/2/

a {
  text-decoration: none;
  display: flex;
  position: relative;
  width: 328px;
}

div.tile {
  position: relative;
  padding: 12px 10px;
  box-sizing: border-box;
  background-color: white;
  color: black;
  display: block;
  width: 328px;
  margin: 0;
  box-shadow: 1px 2px 4px 0 #e0e0e0;
  border: solid 1px #dcdcdc;
}

div.link-active-cover {
  background: rgba(220, 220, 220, 0.6);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}

a:active div.link-active-cover {
  display: block;
}

<a href="https://www.google.de" target="_blank">
  <div class="tile">
    This is some content in a clickable box.
  </div>
  <div class="link-active-cover"></div>
</a>

在 Chrome 中一切正常，但在 Firefox 中 link 没有执行。单击 div.link-active-cover 显示，但新页面未打开。

有趣的事实：如果 div.link-active-cover 从一开始就可见（没有 display: none），则显示 div 而 link 有效。

这是我的错误还是 Firefox 中的错误？

Answer 1

可能是因为当 click 事件发生时（在 mouseup 之后），鼠标不在主要点击的元素上。

没关系，解决方案是使用 opacity 更改：

a {
  text-decoration: none;
  display: flex;
  position: relative;
  width: 328px;
}

div.tile {
  position: relative;
  padding: 12px 10px;
  box-sizing: border-box;
  background-color: white;
  color: black;
  display: block;
  width: 328px;
  margin: 0;
  box-shadow: 1px 2px 4px 0 #e0e0e0;
  border: solid 1px #dcdcdc;
}

div.link-active-cover {
  background: rgba(220, 220, 220, 0.6);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .001;
}

a:active div.link-active-cover {
  opacity: 1;
}

<a href="https://www.google.de" target="_blank">
  <div class="tile">
    This is some content in a clickable box.
  </div>
  <div class="link-active-cover"></div>
</a>

Updated Fiddle.

仅在显示 div 的活动时阻止在 Firefox 中执行 link

Only on active shown div blocks execution of link in Firefox

html

css

firefox

google-chrome