Могу ли я отключить переход после его отображения?

Question

есть ли возможность сделать функцию перехода после того, как вы наведете на нее курсор и когда будете перемещать мышь и снова зависать над ней, чтобы больше не функционировать? чтобы отключить переход после однократного воспроизведения.

спасибо

Answer 1

Да! Это возможно, изменив имя класса вашего элемента перехода, используя javascript при наведении курсора. Однако, когда вы наводите курсор на элемент перехода, функция 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>