html - 如何防止这种双重悬停？

Question

我使用了 CSS3 效果，其中黑框在鼠标悬停时缩放到左上角的 0.25。

我在这里面临的问题是，一旦悬停，动画就会开始，如果鼠标指针仍在黑框范围内(并悬停)，动画会再次从现有点重新开始。这会妨碍平稳过渡。如何解决？

This link contains the black box

下面是代码。请注意，黑框包含在 CSS 类“图像效果”中。

.image-effect {
  animation-name: slideUp;
  transition: all 0.5s;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.image-effect:hover {
  transform: scale(0.25) ;
  transform-origin: top left; 
  overflow: hidden;
}

提前致谢。

Answer 1

您需要添加一个包含悬停但不变换的父元素。你的 CSS 最终会看起来像这样:

.parent-element:hover .image-effect {
  transform: scale(0.25) ;
  transform-origin: top left; 
  overflow: hidden;
}