我有一個圖示，當你懸停在它上面時會旋轉，但只在懸停時旋轉，而不是在“取消懸停”上。但是，當從物件上移除游標時，影片會停止。即使游標不再位于物件上，我怎樣才能讓它恢復影片？我的代碼：
.header .logo img {
transform: rotate(0deg);
transition: transform 0s 0s;
}
.header .logo img:hover {
transform: rotate(360deg);
transition: transform 1.2s;
animation-play-state: running;
}
感謝您提前提供幫助
uj5u.com熱心網友回復：
您需要某種方式讓元素“記住”它必須繼續旋轉。
為此，您需要一些 Javascript 來感知滑鼠何時懸停在元素上以及何時結束轉換。這些事件將分別添加和洗掉一個類。
const div = document.querySelector('.header .logo img');
function addRotate() {
div.classList.add('rotate');
}
function removeRotate() {
div.classList.remove('rotate');
}
div.addEventListener('mouseover', addRotate);
div.addEventListener('transitionend', removeRotate);.header .logo img {
transform: rotate(0deg);
transition: transform 0s 0s;
}
.header .logo img.rotate {
transform: rotate(360deg);
transition: transform 1.2s;
}<div class="header">
<div class="logo">
<img src="https://picsum.photos/id/1015/200/300">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384456.html
上一篇：在.Html檔案的所有段落中將<P>解釋為<P.SERIF>
下一篇：如何防止卡片組在小螢屏上包裝？