具有框架防止的CSS动画:悬停
提问于 2015-02-12 11:46:34
我正在做一个带有背景转换的CSS animation，我想要一个不同的背景，用于:悬停。但是它不起作用:当我将光标悬停在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');
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-02-12 12:20:08
动画中的CSS声明在动画期间覆盖其他声明：
"CSS动画会影响计算出的属性值。在动画执行期间，属性的计算值由动画控制。这将覆盖在普通样式系统中指定的值。动画覆盖所有正常规则，但被！重要规则覆盖。“- http://www.w3.org/TR/css3-animations/。
一旦动画完成，.loaderGif:hover将是活动的，不过万一它永远不会激活，因为动画是无限的。
若要解决问题，请将代码更改为
.loaderGif:hover{
-webkit-animation: none;
animation: none;
background: url('../images/loaderBlack.gif');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28486454
复制相关文章
![php对‘[{“id“:“1“,“name“:“cyg”},{“id“:“2“,“name“:“liwen“}]json数据进行修改删除操作](https://ask.qcloudimg.com/http-save/yehe-7873631/aa2103fe768ee32808222fe9105d00f7.png)
![如何对图像进行卷积操作[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/ceb9f658018de03df6e951c836ded8ee.png)
点击加载更多
腾讯云开发者
