css3：动画后悬停不起作用

我有一个DIV，当：悬停时，它的颜色变为蓝色。 单击按钮可添加将bgcolor设置为绿色动画的类。但现在：悬停不起作用（bgcolor不会变为蓝色）

为什么?

HTML:

JS:

对于

，您可以使用以下CSS规则。改为触发bg更改

：

.trigger-bg-change {
    background-color: green;
    -webkit-animation: bg-change 1s ease 0 1 none;
    animation: bg-change 1s ease 0 1 none;  
}

通过将“动画填充模式”属性从“向前”更改为“无”，动画在执行后将不会将样式应用于元素，因此

.box:hover

的规则将不会被覆盖。

JavaScript解决方案：

HTML

替代解决方案（不使用JavaScript）：

HTML

.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;}
    }

$(function() {
        $('.animate-btn').on('click', function() {
            console.log('hey');
            $('.box').addClass('trigger-bg-change');
        });
});

.trigger-bg-change {
    background-color: green;
    -webkit-animation: bg-change 1s ease 0 1 none;
    animation: bg-change 1s ease 0 1 none;  
}

<div class="box-init"></div>
<button class="run-btn">Run Animation</button>

.box-init, .box-post {
    width: 200px;
    height: 200px;
    margin-bottom:10px;
}

.box-init{
  background-color: red;
}

.box-post{
  background-color: green;
}

.box-post:hover{
  background-color:blue;
}

.box-transition{
  transition-property: background-color; 
  transition-duration: 0.5s; 
  transition-timing-function: ease; 
  transition-delay: 0s;
}

.box-animation{
    /*Animation properties*/
    animation-name: bg-change;
    animation-duration: 0.5s; /*  <-- ANIMATION DURATION IS 0.5 SECONDS!!  */
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes bg-change {
    100% {background-color:green;}
}

const runBtn = document.querySelector('.run-btn');
const box = document.querySelector('.box-init');

runBtn.addEventListener('click', ()=>{
    box.classList.add("box-animation"); // animation duration is 0.5 seconds
  setTimeout(() => { // so after 0.6 seconds we will remove the animation
    box.classList.add("box-post");
    box.classList.remove("box-init");
    box.classList.remove("box-animation");
    box.classList.add("box-transition");
  }, 600); //0.6 seconds

});

<div class="box"></div>

.box {
    background-color: red;
    width: 200px;
    height: 200px;
    margin-bottom:10px;

    /*Animation properties*/
    animation-name: bg-change;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes bg-change {
    0% {background-color:red;}
    100% {background-color:green;}
}

.box:hover{
    /*Animation properties*/
    animation-name: hover-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes hover-animation {
    0% {background-color: green;}
    100% {background-color:blue;}
}