Question

我在页面顶部有一个居中的三部分徽标，我希望在鼠标悬停时将一部分向左滑动一半，另一半向右滑动。但是，我已经实现了这一点，它会在每个悬停输入上设置动画效果，并且外观会很差。我想知道是否可以仅将一个鼠标悬停在徽标上，然后使其停留在该位置，直到鼠标离开徽标的原始位置为止。

/* Forward-Logo-P2 */

.hvr-forward {
  display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.75;
  transition-duration: 0.75s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hvr-forward:hover,
.hvr-forward:focus,
.hvr-forward:active {
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
  animation-iteration-count: 1;
}


/* Backward-Logo-P1 */

.hvr-backward {
  display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.75s;
  transition-duration: 0.75s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hvr-backward:hover,
.hvr-backward:focus,
.hvr-backward:active {
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px);
  animation-iteration-count: 1;
}

<div id="images">
  <img class="logo hvr-backward" border="0" src="../images/logo-p1.png">

  <img class="logo" border="0" src="../images/logo-p3.png">

  <img class="logo hvr-forward" border="0" src="../images/logo-p2.png">
</div>

Answer 1

我认为您通过将焦点，活动和悬停分组以执行相同的功能（因此闪烁）而多次调用此命令。只需在悬停状态下进行操作即可，也可以在活动状态下进行操作，因此仅在单击时完成操作，但在释放单击后又可以返回。

  Error: unexpected '}' in "  }"

更改为：

.hvr-forward:hover,
.hvr-forward:focus,
.hvr-forward:active {
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
  animation-iteration-count: 1;
}

脚本可能会让您做更多定制的事情

如何保持光标输入免受垃圾邮件悬停元素的影响？

1 个答案: