过渡显示后是否可以禁用过渡？

Question

一旦将鼠标悬停在其上，并且将鼠标移出然后再次悬停在其上时，是否有可能具有过渡功能，不再起作用？因此可以在播放后禁用过渡。

谢谢

Answer 1

是的！悬停时，可以通过使用javascript更改过渡元素的类名称来实现。但是，当您将鼠标悬停在transition元素上时，将在您的鼠标悬停样式之前调用javascript函数，即使在第一次也不会看到过渡。为了解决这个问题，您可以在第二次悬停时更改className。以下是我如何对具有类名称“ demo”的元素进行的操作，该元素在第二次悬停时更改为“ demoover”：

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>