Maison >interface Web >tutoriel CSS >Comment puis-je retarder les effets :hover en CSS sans JavaScript ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-26 15:38:09440parcourir

How Can I Delay :hover Effects in CSS Without 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 :


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

}
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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn