css3:动画后悬停不起作用

2022-01-22 00:00:00 hover css css-animations

我有一个 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.

相关文章