CSS转换移动点击处理程序？

Question

我倾向于使用以下 SCSS @mixin 来制作动画效果，让用户了解我的项目中的交互内容。

@mixin clickAnimation($opacity: 0.5, $distance: -1px, $time: 75ms) {
  opacity: 1;
  transition: $time ease;
  cursor: pointer;
  &:hover {
    transform: translateY($distance);
    opacity: $opacity;
  }
  &:active {
    transform: translateY(2px);
  }
}

我倾向于像这样在整个网站上使用它：

a:not(.disabled) {
  @include clickAnimation();
}

最近我注意到一个奇怪的问题。

如果用户将<a> 元素悬停在<a> 的底部像素上，<a> 将转换为-1px。当用户点击<a>时，:activecss状态将执行（在这种情况下，向下转换为2px），但点击动作不会注册。所以不会触发点击处理程序，也不会触发链接。

以前有没有人遇到过这个问题并且知道我可以做些什么来解决它？

根据要求，这是一个演示问题的小提琴：https://jsfiddle.net/bf9yk0tn/

Answer 1

显然，DOM 失去了对元素的跟踪，因为它从其原始位置移动，并且在单击事件发生时没有任何内容（尽管它以某种方式管理悬停）。

您可以寻求这样的解决方法来填补空白，但我不确定它是否是最佳解决方案。

a:hover::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: 100%;
}

这里是更新jsfiddle