Maison  >  Article  >  interface Web  >  Comment ajuster les animations : survol pour l'interaction avec les appareils mobiles ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-09 01:27:02957parcourir

How to Adjust :hover Animations for Mobile Device Interaction?

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!

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