Comment puis-je retarder les effets :hover en CSS sans JavaScript ?

Retarder les effets :hover en CSS

Pouvez-vous retarder un événement :hover sans utiliser JavaScript ?

Il est possible de retarder l'application des effets de survol en CSS en utilisant transitions.

Comment retarder un effet :hover à l'aide de transitions :

Considérez le code CSS suivant :

div {
    transition: 0s background-color;
}

div:hover {
    background-color: red;
    transition-delay: 1s;
}

Dans cet exemple, le La propriété transition-delay est définie sur 1 seconde. Cela entraîne un retard du changement de couleur d'arrière-plan d'une seconde lorsque l'état :hover est entré.

Exemple :

<div>delayed hover</div>

Démonstration visuelle :

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
transition-delay:1s;

background-color: red;