J'utilise le survol et les transitions CSS3 pour afficher et masquer une image. Sur les appareils mobiles, j'aimerais utiliser la même transition pour les événements tactiles.
Fondamentalement, le premier contact effectuerait l'effet de survol ou le roulement, et la retouche effectuerait le roulement.
Je voudrais éviter d'utiliser JavaScript pour ce faire. S'il existe un moyen de le faire avec du CSS3 pur, ce serait la meilleure option.
Utiliser l' :active de la pseudo-classe css, puis ajouter ontouchstart="" et onmouseover="" à la balise body.
Le code suivant est extrait à partir de mon site, dans lequel j'ai des boutons qui deviennent plus petits et éclat blanc lors de son survol(sur pc) ou enfoncée(sur les appareils tactiles)
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
Les modifications suivantes ne sont plus d'actualité car j'ai supprimé l'original, des instructions incorrectes, mais si vous avez été ici avant que ceux-ci peuvent encore être utile
EDIT: j'ai découvert qu'il fonctionne plus fiable si, plutôt que de mettre des ontouchstart="" dans chaque lien, le mettre dans l' <body> balise. Si votre balise body devrait ressembler à celui -<body ontouchstart=""> et vos liens ressembler à ceci
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2: j'ai compris que, plutôt que de copier votre CSS et l'utilisation de l'écran de la taille des requêtes pour les ordinateurs de bureau, il suffit d'ajouter `onmouseover="" de la balise body également, de sorte que l' :active pseudo classe sera appelée par la souris sur le bureau ET par des touches sur mobile. Vous pouvez simplement ignorer la randonnée sur les requêtes de média si vous faites cela.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
