Question

我使用了CSS3效果，黑盒子在鼠标悬停时向左上角缩放到0.25。

我面临的问题是，一旦盘旋，动画就会开始，如果鼠标指针仍在黑匣子的范围内（并且悬停），动画将再次从现有点重新开始。这可以防止平稳过渡。怎么解决这个问题？

以下是代码。请注意，黑盒子包含在CSS clas的“图像效果”中。

.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;
}

Answer 2

查看这个小提琴http://jsfiddle.net/7wdqmhrd/

使用效果定位内部div元素，如下所示：

.image-effect div {
    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 div {
    transform: scale(0.25);
    transform-origin: top left;
    overflow: hidden;
}

希望它有所帮助！

Answer 3

1）添加内部div标签

<div class="image-effect">
    <div> // Beginning Tag Added
        <a href="http://albion123.byethost7.com/creative/wp-content/uploads/2015/01/bg11.png"><img class="size-full wp-image-225 alignleft" src="http://albion123.byethost7.com/creative/wp-content/uploads/2015/01/bg11.png" alt="bg1" data-id="225"></a>
    </div> // Ending Tag Added
</div>

2）只需在你的两个类中添加一个div标签

.image-effect div 
.image-effect:hover div

因为你想要移动内部div。

如何防止这种双重悬停？

3 个答案: