Les transitions CSS peuvent-elles retarder les effets de survol sans JavaScript ?

Retarder les effets de survol en CSS

Question :

Est-il possible de retarder le activation de l'événement CSS :hover sans recourir à JavaScript ? Plus précisément, comment y parvenir tout en simulant la fonctionnalité de hoverIntent, un plugin jQuery populaire pour retarder les effets de survol ?

Réponse :

Les transitions CSS peuvent être exploitées pour retarder :effets de survol. Voici un exemple :

div {
    transition: 0s background-color;
}

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

Dans cet exemple, la couleur de fond de l'élément ne sera changée en rouge qu'une seconde après le survol de la souris.

Voici une démonstration plus complète qui inclut un délai d'activation et de désactivation du survol :

div {
    display: inline-block;
    padding: 5px;
    margin: 10px;
    border: 1px solid #ccc;
    transition: 0s background-color;
    transition-delay: 1s;
}

div:hover {
    background-color: red;
}

<div>delayed hover</div>

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!