Comment ajuster les animations : survol pour l'interaction avec les appareils mobiles ?

Ajustement de l'animation :hover pour l'interaction avec les appareils mobiles

Vous avez rencontré un problème où l'animation CSS :hover, qui développe un panneau, ne se déclenche pas sur mobile appareils en raison de l’absence de survol de la souris. Pour résoudre ce problème, vous essayez de basculer le déclencheur sur « clic » ou « toucher » lorsque la largeur de la page est inférieure à 700 px.

Pour y parvenir, vous pouvez utiliser une combinaison de sélecteurs :hover et :active. En ordonnant les sélecteurs avec :active après :hover dans votre CSS, vous pouvez vous assurer que les actions de toucher ou de clic sur votre panneau déclencheront également l'animation. Voici le CSS mis à jour :

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

Cette modification garantit que le panneau s'agrandira lors du survol ou du toucher sur les ordinateurs de bureau et les appareils mobiles. Pour vérifier sa fonctionnalité, il est recommandé de le tester dans un environnement mobile réel, car les simulateurs peuvent ne pas fournir de résultats précis.

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!