Question

我有以下CSS动画：

.border-strobe {
     -webkit-animation: border-strobe-animation 1.5s infinite ease-in-out;
}

@-webkit-keyframes border-strobe-animation {
    0% {border:2px solid #FF1d38;}
    50% {border:2px solid #000000;}
    100% {border:2px solid #FF1d38;}
}

基本上，我想做的是：

•在悬停时（例如.border-strobe:hover），我想将边框颜色更改为#FF1D38。

•一旦我离开悬停，我想简单地让动画运行它是正常的过程。

问题是，我在课程.border-strobe的页面上有一些元素，我希望及时保留它们。

是否有一种简单的方法可以使用悬停覆盖边框颜色并保持动画彼此一致，或者目前无法执行此操作？

这有意义吗？

Answer 1

您是否有理由让动画继续正常运行？

如果您想要的悬停颜色与动画的开头和结尾相同，为什么不在悬停类中定义边框颜色时悬停动画？

这是我能得到的最接近的地方：http://jsfiddle.net/xsjJy/

<强>更新

我简直不敢相信我以前没想到过！如果你愿意改变HTML，你可以抛出一个掩码范围（或div或任何你想要的东西），当你将鼠标悬停在边界选通上时，只需更改边框。

以下是jsFiddle更新：http://jsfiddle.net/xsjJy/2/

用以下方法覆盖动画：悬停

1 个答案: