html - 悬停时禁用 CSS 动画

Question

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

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

不幸的是，在悬停状态下动画仍然应用，我如何让悬停状态保持静态颜色而没有动画效果？

这是代码示例:https://jsfiddle.net/zje0pb8v/

Answer 1

您可以将 css 伪类 :not() 与 :hover 一起使用

更新的 fiddle : 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;
}