停用懸停的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; 
}