Comment puis-je faire fonctionner les animations de survol sur les appareils mobiles ?

Conversion : passez la souris en toucher/clic pour les appareils mobiles

Lorsque vous traitez des animations Web, il est important de prendre en compte la compatibilité mobile. :hover, un déclencheur courant pour les animations basées sur le survol, peut ne pas fonctionner sur les appareils mobiles où il n'y a pas d'action physique de survol.

Pour résoudre ce problème, CSS propose une solution élégante : le sélecteur :active.

Exploiter :active pour simuler le clic/toucher

En combinant :active avec :hover, nous pouvons créer une animation qui se déclenche soit au survol (pour ordinateur), soit au clic/touch (pour mobile).

.info-slide:hover, .info-slide:active {
  height: 300px;
}

Raison d'être de l'approche

Le sélecteur :active est appliqué lorsqu'une interaction est active avec un élément, par exemple en cliquant ou en touchant. En le plaçant après la règle :hover, nous garantissons que l'animation se déclenche lorsque :hover ou :active est respecté.

Test et vérification

Pour vérifier cette solution, testez simplement votre page Web dans un environnement de bureau et mobile. Vous devriez observer l'animation déclenchée soit par le survol sur le bureau, soit par un clic/toucher sur un mobile.

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!