覆蓋動畫有：懸停

我有以下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，我想讓他們及時。

是否有一種簡單的方法可以使用懸停來覆蓋邊框顏色並保持動畫相互一致，還是目前無法做到這一點？

這有道理嗎？

來源

2012-05-04 LeeR

或者，如果有人知道不同的方式，不使用JavaScript，如果你給我一個提示，我可以工作，其餘:) – LeeR

我不是太熟悉，但CSS3我正在考慮停止所有動畫的唯一方法，及時更改當前懸停元素邊框的顏色_is_以僅使用JS。 –

它會更好，如果你添加一些代碼... –

你有什麼理由讓動畫繼續正常運行嗎？

如果您需要的懸停顏色與動畫的開始和結束相同，爲什麼不在懸停類中定義邊框顏色時停止懸停動畫？

這裏是最接近我能得到：http://jsfiddle.net/xsjJy/

UPDATE

我不能相信我沒想到之前的吧！如果你願意改變HTML，你可以放入一個遮罩跨度（或div或任何你想要的），並且當你將鼠標懸停在border-strobe上時，就可以改變邊界。

這裏的的jsfiddle更新：http://jsfiddle.net/xsjJy/2/

來源

2012-05-04 18:18:08

但是我只注意到我無法保持動畫同步。 –

保持動畫同步是我想保持它的主要原因。感謝您的支持。 – LeeR

哇......我不敢相信我沒想到！有時我覺得我嘗試過於複雜。感謝那... – LeeR

覆蓋動畫有：懸停

回答

相關問題