css - 我可以在显示后禁用过渡吗？

Question

将鼠标悬停在其上并且将鼠标移出然后再次悬停在其上时，是否有可能进行转换功能，不再起作用？所以在播放后禁用过渡。

谢谢你

标签： csshovertransitionmouseover

Answer 1

是的！可以在悬停时使用 javascript 更改过渡元素的类名。但是，当您将鼠标悬停在过渡元素上时，将在您的悬停样式之前调用 javascript 函数，即使第一次也不会看到过渡。要解决此问题，您可以在第二次悬停时更改 className。以下是我如何在第二次悬停时更改为“demoover”的类名为“demo”的元素上完成此操作：

var timedHover=0;

function mouseOver() {
if(timedHover!=0){
document.getElementById("demo").className = "demoover";
}
timedHover=1;
} 

.demo{
     color:red;  
     transition: 1s;
}
.demo:hover{
     color:pink; 
}
     
.demoover{
     color:red;   
}

<h1 id="demo" class="demo" onmouseover="mouseOver()">Mouse over me</h1>