暂停CSS动画

Question

我在 HTML 和 CSS 中制作了一个幻灯片，当我的鼠标悬停在上面时，我希望能够暂停幻灯片。我尝试使用 -webkit-animation-play-state: paused; 来实现这一点，但这只会暂停一个图像，从而破坏幻灯片的正常播放。有没有办法在悬停时暂停所有图像？

http://jsfiddle.net/m3q8pe56/

- maxmijn

Answer 1

http://jsfiddle.net/m3q8pe56/1/

#slideshow:hover .photo {
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
}

当您悬停在 #slideshow 上时，您将暂停 #slideshow 中的所有 .photo。

- Nick

---

请添加一些解释 :) - Alex Char

谢谢兄弟！这是否意味着：当鼠标悬停在幻灯片div上时，暂停所有.photo实例？ - maxmijn

@AlexChar 我认为这很容易理解，但我有点同意你的看法。这只是将元素上当前正在运行的动画状态设置为暂停。选择器 #slideshow:hover .photo 也是你需要的：如果你将鼠标悬停在 #slideshow 元素上，它会选择 .photo 元素，从而暂停动画。 - Ismael Miguel