web-dev-qa-db-fra.com

Effets de survol à l'aide d'événements tactiles CSS3

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, la première touche effectuerait l'effet de survol ou de survol, et la retouche effectuerait le roll off.

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.

cssmobilecss3css-transitions
39
mattwallace

Utilisez le :active pseudo-classe dans votre css, puis ajoutez ontouchstart="" et onmouseover="" à la balise body.

Le code suivant est extrait de mon site, dans lequel j'ai des boutons qui deviennent plus petits et brillent en blanc lorsqu'ils sont survolés (sur des PC) ou maintenus enfoncés (sur des 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 pertinentes car j'ai supprimé les instructions incorrectes d'origine, mais si vous étiez ici avant, elles peuvent toujours être utiles

EDIT: J'ai découvert que cela fonctionne plus fiable si, plutôt que de mettre ontouchstart="" dans chaque lien, mettez-le dans le <body> tag. Votre balise corporelle devrait donc ressembler à ceci<body ontouchstart=""> et vos liens ressemblent à 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 d'utiliser des requêtes de taille d'écran pour le bureau, ajoutez simplement `onmouseover =" "à la balise body également, donc la: pseudo classe active sera appelé par la souris sur le bureau ET par touches sur le mobile. Vous pouvez simplement ignorer les divagations sur les requêtes multimédias si vous faites cela.

70
Chuck Dries

Si vous ne souhaitez pas modifier votre code HTML, vous pouvez essayer ceci:

<script>
  document.body.addEventListener('touchstart',function(){},false);
</script>
6
RyanBay