web-dev-qa-db-fra.com

Changer: passez la souris sur / cliquez pour les appareils mobiles

J'ai jeté un coup d'œil autour de moi mais je n'arrive pas à trouver ce que je cherche.

J'ai actuellement une animation CSS sur ma page qui est déclenchée par: hover. J'aimerais que cela change en "clic" ou "toucher" lorsque la page est redimensionnée après une largeur supérieure à 700 pixels à l'aide de requêtes multimédia.

Voici ce que j'ai pour le moment: http://jsfiddle.net/danieljoseph/3p6Kz/

Comme vous pouvez le constater, le survol ne fonctionnera pas sur les appareils mobiles, mais je veux tout de même m'assurer qu'il fonctionne de la même manière par clic et non en survol.

Je préférerais utiliser les CSS si possible, mais heureux avec JQuery également.

J'ai l'impression que c'est très facile à faire, mais il me manque quelque chose de très évident! Toute aide serait appréciée.

Voici l'animation css:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}
csscss-animations
56
DannyBoy

Si vous utilisez: sélecteur actif en combinaison avec: survol, vous pouvez y parvenir selon w3schools tant que le sélecteur: actif est appelé après le sélecteur: hover.

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

Vous devez tester le VIOLON dans un téléphone mobile environnement. Je ne peux pas pour le moment.
correction - Je viens de tester un mobile, cela fonctionne bien

64
LOTUSMS

Vous pouvez ajouter onclick="" à l'élément survolé. Hover fonctionnera après cela.

Edit: Mais vous ne devriez vraiment pas ajouter de style à votre balisage, mais plutôt le poster.

17
MindlessRanger

J'ai eu le même problème, dans un appareil mobile avec le navigateur Edge de Microsoft. Je peux résoudre le problème avec: aria-haspopup="true". Il doit ajouter au div et au :hover, :active, :focus pour les autres navigateurs mobiles.

Exemple html:

<div class="left_bar" aria-haspopup="true">

CSS:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }
5
Steve_Angel

Je suis un noob CSS, mais j'ai remarqué que le survol fonctionnerait sur les écrans tactiles, à condition qu'il s'agisse d'un élément "survolable": image, lien, bouton. Vous pouvez tout faire avec CSS en utilisant le truc suivant.

Changez l’arrière-plan de votre div en une balise d’image réelle dans la div ou créez un lien factice autour de la div en entier. Il s’enregistrera alors comme un survol lorsque vous toucherez l’image.

Cela signifie que vous avez besoin que le reste de votre page soit également "survolable"; ainsi, lorsque vous touchez en dehors de l'image, celle-ci reconnaît que info-slide: le survol est terminé. Mon astuce est de faire tous mes autres liens factices de contenu.

Ce n'est pas très élégant mais ça marche.

2
user6679588
document.addEventListener("touchstart", function() {}, true);

Cet extrait active les effets de survol pour les écrans tactiles

1
indapublic

Sur la plupart des appareils, les autres réponses fonctionnent. Pour moi, pour que cela fonctionne sur chaque périphérique (dans la réaction), je devais l'envelopper dans une balise d'ancrage <a> et ajouter ce qui suit: :hover, :focus, :active (dans cet ordre), ainsi que role="button" et tabIndex="0".

1
Ryan Walker