html - 仅在事件显示的 div 上阻止在 Firefox 中执行链接

Question

安<a href>元素围绕着两个 div。如果链接处于事件状态(单击时刻)，则仅显示其中一个 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 中，链接没有执行。点击 div.link-active-cover出现了，但是新页面打不开。

有趣的事实:如果div.link-active-cover从一开始就可见(没有 display: none )，显示了 div 并且链接有效。

这是我的错误还是 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 .