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;

Copier après la connexion

}
div:hover {

background-color: red;

}

Cette démonstration montre un élément div avec un effet de survol retardé sur le changement de couleur d'arrière-plan, indiquant comment vous pouvez exploiter les transitions pour retarder les effets de survol dans CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!