我有一个DIV,当鼠标悬停时,背景色会变成蓝色。
按钮点击后添加类,使背景色动画变为绿色。 但是现在: hover不起作用(bgcolor不会变为蓝色)。
为什么?
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');
});
});