css3 :hover wont work after animation(css3:动画后悬停不起作用)
问题描述
我有一个 DIV,它在 :hover 时将 bgcolor 更改为蓝色.按钮单击添加了将 bgcolor 设置为绿色的类.但是现在 :hover 不起作用(bgcolor 不会变成蓝色).
I have a DIV which changes bgcolor to blue when :hover. Button click adds class which animates bgcolor to green. But now :hover wont work (bgcolor wont change to blue).
为什么?
http://jsfiddle.net/EstSiim/me7t055c/
HTML:
<div class="box"></div>
<button class="animate-btn">Animate</button>
CSS:
.box {
background-color: red;
width: 200px;
height: 200px;
}
.box:hover {
background-color: blue;
}
.trigger-bg-change {
-webkit-animation: bg-change 1s ease 0 1 forwards;
animation: bg-change 1s ease 0 1 forwards;
}
@-webkit-keyframes bg-change {
0% {background-color:red;}
100% {background-color:green;}
}
@-keyframes bg-change {
0% {background-color:red;}
100% {background-color:green;}
}
JS:
$(function() {
$('.animate-btn').on('click', function() {
console.log('hey');
$('.box').addClass('trigger-bg-change');
});
});
推荐答案
DEMO
您可以对 .trigger-bg-change
使用以下 CSS 规则:
You can use the following CSS rules for .trigger-bg-change
instead:
.trigger-bg-change {
background-color: green;
-webkit-animation: bg-change 1s ease 0 1 none;
animation: bg-change 1s ease 0 1 none;
}
通过将 animation-fill-mode 属性从 forwards
更改为 none
,动画将不会将样式应用于其后的元素已执行,因此 .box:hover
的规则不会被覆盖.
By changing the animation-fill-mode property from forwards
to none
, the animation will not apply the styles to to element after it has executed, so the rules for .box:hover
will not get overridden.
这篇关于css3:动画后悬停不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:css3:动画后悬停不起作用
基础教程推荐
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 动态更新多个选择框 2022-01-01