CSS3動畫觸發其他DOM元素

Question

我目前有一些CSS3動畫在頁面加載時以無限循環播放。

有沒有辦法，手動觸發這些 - 例如，如果我將鼠標懸停在另一個上 DOM元素，而不需要Javascript/Jquery？

即 - >將鼠標懸停元素的 - >啓動動畫的DOM元素X，Y，Z

提前感謝

Answer 1

你可以將其設置爲你的CSS一class，然後用javascript觸發添加/刪除。

$('#element1').hover(function(){ 
    $('#element2').addClass('animate'); 
}, function(){ 
    $('#element2').removeClass('animate'); 
}); 

爲了勾引事件，您將需要使用Javascript。

另一種使用純CSS的方法是使用僞類:hover，但前提是#element2是#element1的孩子。

#element1:hover #element2{ 
    /* Your animation */ 
} 

Answer 2

您需要設置DOM，以便x，y和z位於元素a的內部。那麼你可以這樣做：

a:hover x,y,z { 
    animation:yourAnimation 5s infinite; 
}