停用悬停的CSS动画

Question

我目前有一个div类black，上面有flash动画，悬停时它变成绿色。

black有一个::after状态与它的动画。

不幸的是，在悬停状态下动画仍然适用，我如何将悬停状态保留为静态颜色而不具有动画效果呢？

下面的代码示例：https://jsfiddle.net/zje0pb8v/

Answer 1

您可以使用CSS伪类:not()与:hover

更新小提琴： https://jsfiddle.net/zje0pb8v/3/

.black:not(:hover)::after { 
    position: absolute; 
    top: -2px; 
    content: ""; 
    width: 120px; 
    height: 205px; 
    background-color: #ccc; 
    -webkit-animation: flash3 steps(1, end) 2s infinite; 
    -moz-animation: flash3 steps(1, end) 2s infinite; 
    -ms-animation: flash3 steps(1, end) 2s infinite; 
    -o-animation: flash3 steps(1, end) 2s infinite; 
    animation: flash3 steps(1, end) 2s infinite; 
}