纯CSS悬停停止动画

我需要停止以下项目悬停动画

我想是加了

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

可能已经足够了，但它只对可见图像有效，而对其他三个动画在背景中继续

我怎样才能解决这个问题

---

感谢阅读您应该使用

：将
伪类悬停在
.container
上，然后在所有
.photo
上暂停动画


正文{
背景：#000；
}
.集装箱{
保证金：50px自动；
宽度：500px；
高度：300px；
溢出：隐藏；
边界：10px固体；
边框顶部颜色：#856036；
左边框颜色：#5d4426；
边框底色：#856036；
右边框颜色：#5d4426；
位置：相对位置；
}
.照片{
位置：绝对位置；
动画：第16轮无限；
不透明度：0；
}
@关键帧圆形{
25% {
不透明度：1；
}
40% {
不透明度：0；
}
}
第N名儿童（1）{
动画延迟：12秒；
}
第N名儿童（2）{
动画延迟：8秒；
}
第N名儿童（3）{
动画延迟：4s；
}
img:n个孩子（4）{
动画延迟：0s；
}
.容器：悬停。照片{
动画播放状态：暂停；
-webkit动画播放状态：暂停；
}