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状态（在这种情况下，向下转换为2px），但是click动作不会注册。因此，不会触发点击处理程序，也不会导致链接导致重定向。

以前有没有人遇到过这个问题，并且知道该如何解决？

根据要求，以下是一个小提琴，它演示了此问题：https://jsfiddle.net/bf9yk0tn/

Answer 1

很明显，由于DOM从其原始位置移开，因此DOM失去了对元素的跟踪，并且在单击事件发生时没有任何内容（尽管如此，它仍可以管理鼠标悬停）。

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

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

这是更新jsfiddle

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

1 个答案: