应该:在CSS动画完成后悬停伪状态样式更改工作
应该:在CSS动画完成后悬停伪状态样式更改工作
提问于 2014-11-06 19:32:04
在元素上运行完CSS动画后，在伪状态(如:hover )上指定的样式更改是否会生效？
编辑:也许更相关的是，我应该问:为什么在动画上应用“前进”会阻止更具体的样式更改覆盖？
编辑2:事实证明这实际上是一个跨浏览器的问题。例如，Chrome (我运行的是38.0.2125.111版本)运行不正确，但Firefox根据规范进行了处理。
长话短说:根据规范(正如下面的chrona所引用的)，将!important添加到覆盖应该会呈现该样式。然而，目前只有Firefox能正确处理这个问题。
这是一个缩减：
@keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
@-webkit-keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
.box {
animation: go 3s forwards;
-webkit-animation: go 3s forwards;
}
.box:hover {
background: orange!important;
cursor: pointer;
}<div class="box">Hover states don't work after animation</div>
我找不到与此相关的信息，规范中也没有：http://www.w3.org/TR/css3-animations/
有谁知道a)这应该是可能的吗？b)如何在动画结束后使元素处于悬停状态？
回答 1
Stack Overflow用户
发布于 2014-11-06 20:05:39
其实我不太理解你的问题，也许你需要这样的效果？http://jsfiddle.net/abruzzi/5td8w6jx/
@keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
@-webkit-keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
.box {
animation: go 3s forwards;
-webkit-animation: go 3s forwards;
}
.box:hover {
-webkit-animation: none;
background: orange;
cursor: pointer;
}然而，使用这些代码，当你用鼠标移出文本时，动画将被重播。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26778434
复制相关文章
相似问题