皈依舞
2024-01-18 14:43:56
請幫助我使用 animate.css 和 javascript(jQuery) 在鼠標懸停時為該元素設置動畫這是我嘗試過的,但不適用于某些課程,例如。 animate__jello超文本標記語言 <span onmouseover="add_efect(this)" > Eat </span>JSfunction add_efect(element){ element.classList.add('animate__animated', 'animate__jello'); element.addEventListener('animationend', () => { element.classList.remove('animate__animated', 'animate__jello'); });}
1 回答

蝴蝶不菲
TA貢獻1810條經驗 獲得超4個贊
如果您想將<span>元素與 animate.css 一起使用,您需要添加display:inline-block它,或者您可以更改它,<h6>如下所示。
<span>元素無法使用 animate.CSS 進行動畫處理。要為它們設置動畫,您需要為它們提供顯示屬性。
function add_efect(element){
element.classList.add('animate__animated', 'animate__jello');
element.addEventListener('animationend', () => {
element.classList.remove('animate__animated', 'animate__jello');
});
}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<h6 onmouseover="add_efect(this)">Eat</h6>
<span style='display:inline-block;' onmouseover="add_efect(this)"> Drink </span>
添加回答
舉報
0/150
提交
取消