Question

我有一个我需要移动的内容（needtoMove）和2个按钮来控制哪个方向。重要的是内容不会随着我重置而停止悬停在按钮上，所以我发牢骚animation-play-state！按钮它工作正常，但有2个按钮，第二个按钮不响应我的悬停。这是代码。

.needToMove {   
    -webkit-animation-name: right, left;
    -webkit-animation-duration: 20s, 20s;
    -webkit-animation-timing-function: linear, linear;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: paused, paused;
}

@-webkit-keyframes left {
    from {right: -100%;}
    to {right: 0%;}
}
@-webkit-keyframes right {
    from {left: -100%;}
    to {left: 0%;}
}

.button1:hover ~ .needToMove{
     animation-play-state: running, paused;
    -webkit-animation-play-state: running, paused;
}

.button2:hover ~ .needToMove{
     animation-play-state: paused, running;
    -webkit-animation-play-state: paused, running;
}

有没有办法不使用Javascript怎么做？（我确信使用JS会更容易，但在这一点上，它最终会使我的神圣使命与css一起工作）。

谢谢！

Answer 1

似乎处理这种情况的最佳方法是根据您悬停的按钮添加适当的动画，而不是最初定义它们。

所以刚开始：

.needToMove {
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

定义你的关键帧动画，然后在悬停时添加你想要的那个：

.button1:hover ~ .needToMove{
     -webkit-animation-name: right;
}
.button2:hover ~ .needToMove{
     -webkit-animation-name: left;
}

在一个元素内更改多个动画上的动画播放状态

1 个答案: