html - 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> , :active css state 将执行(在本例中，向下转换为 2px )，但不会注册点击操作。因此不会触发点击处理程序，也不会导致重定向。

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

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

Answer 1

显然，DOM 失去了对元素的跟踪，因为它从其原始位置移动，并且在点击事件发生时没有任何东西(虽然它以某种方式管理悬停)。

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

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

这是更新 jsfiddle