Question

我正在做一个带有背景转换的CSS animation，我想要一个不同的背景：hover。但它不起作用：当我将光标悬停在div上时，动画仍在播放，但不考虑悬停状态。

当我删除动画时，它完美无缺。

你有什么想法吗？

感谢

.loaderGif{
            width: 465px;
            height: 465px; 
            background: url('../images/loader01.png');
            background-size: cover;
            -webkit-animation: animLoader 4s infinite;
            animation:         animLoader 4s infinite;}

@-webkit-keyframes animLoader {
              0%   { background: url('../images/loader01.png'); }
              50% { background: url('../images/loader02.png'); }
              100% { background: url('../images/loader01.png'); }
            }

.loaderGif:hover{
                background: url('../images/loaderBlack.gif');
            }

Answer 1

动画中的CSS声明会在动画期间覆盖其他声明：

“CSS动画影响计算属性值。在动画执行期间，属性的计算值由动画控制。这将覆盖正常样式系统中指定的值。动画覆盖所有正常规则，但覆盖通过！重要规则。“ - http://www.w3.org/TR/css3-animations/

动画结束后，.loaderGif：hover将处于活动状态，但万一它永远不会，因为动画是无限的。

要解决您的问题，请将代码更改为

.loaderGif:hover{              
    -webkit-animation: none;
    animation:         none;
    background: url('../images/loaderBlack.gif');
}

带框架的CSS动画阻止：悬停

1 个答案: