Comment puis-je remplacer les animations : hover par Touch/Click sur les appareils mobiles ?

Remplacer :hover par Touch/Click sur les appareils mobiles

Dans une situation où vous avez une animation CSS déclenchée par :hover, le défi se produit lorsque votre page est consultée sur un appareil mobile, où le survol n'est pas pris en charge. Pour résoudre ce problème, vous pouvez utiliser des requêtes multimédias pour passer des événements :hover aux événements au toucher ou au clic tout en conservant le comportement souhaité.

Dans votre cas spécifique, votre CSS déclenche actuellement l'animation sur :hover. Pour étendre cette fonctionnalité aux appareils mobiles, vous pouvez ajouter le sélecteur :active en combinaison avec :hover dans la classe .info-slide, en vous assurant que le sélecteur :active apparaît après :hover dans le code.

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

En utilisant ces sélecteurs, vous pouvez obtenir le comportement souhaité, par lequel l'animation est déclenchée à la fois sur :hover pour les appareils de bureau et sur toucher/clic pour les appareils mobiles. Pour tester l'efficacité de cette solution, vous pouvez accéder au JSFiddle fourni dans un environnement 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!