在元素上运行完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)如何在动画结束后使元素处于悬停状态?
发布于 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;
}
然而,使用这些代码,当你用鼠标移出文本时,动画将被重播。
https://stackoverflow.com/questions/26778434
复制相似问题