在悬停时禁用CSS动画

Question

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

black有一个::after状态，上面有动画。

不幸的是，在悬停状态下仍然会应用动画，如何在没有动画效果的情况下将悬停状态保持为静态颜色呢？

以下是代码示例：https://jsfiddle.net/zje0pb8v/

Answer 1

您可以将css psuedo-class :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;
}