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

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例如,在悬停(so )时,我想将边框颜色更改为#FF1D38.

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

然而问题是,我在课程的页面上有一些元素.border-strobe,我想及时保留它们.

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

那有意义吗？

Answer 1

你有没有理由让动画继续正常运行？

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

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

UPDATE

我简直不敢相信我以前没想到过!如果你愿意改变HTML,您可以在面膜跨度(或股利或任何你想要的)抛出,而只是当你将鼠标悬停在边界选通以更改边框.

这是jsFiddle更新:http://jsfiddle.net/xsjJy/2/