Comment faire des liens, des boutons et des divs sur un mobile?

Question

J'ai des difficultés à faire planer des éléments sur un périphérique mobile.

Dans mon CSS, je tape quelque chose comme:

.button:hover { 
    background-color: #fff; 
} 

Cela semble planer bien sur mon bureau, mais sur mon iPhone et d'autres appareils tactiles, je ne peux pas sembler faire le vol stationnaire bouton.

Answer 1

Il n'y a pas d'événement hover sur mobile, vous pouvez définir le comportement du vol stationnaire et cela fonctionnera sur le bureau. Mais sur mobile, vous ne verrez ce pointeur que par un clic/toucher.

Answer 2

Les indicateurs signifient une chose sur l'autre. dans ce cas, c'est le curseur de la souris sur le bouton HTML ou tout autre élément que vous utilisez.

Dans le cas d'un téléphone, il n'y a pas de curseur de la souris. C'est toujours un clic. Les survols dans la plupart des cas ne s'affichent que sur un clic ou un toucher. Si vous en avez vraiment besoin, vous pouvez essayer le Javascrit onclick() ou d'autres fonctions, alors quand ils cliquent ou touchent, vous pouvez ajouter un peu de quelque chose.

Answer 3

Pour une solution très rapide de ce problème avec jQuery/CSS, j'ai fait ce qui suit.

1. a écrit des styles pour mon élément comme celui-ci:

   .one-block:hover, .one-block.hover { ... } 
   

2. a positionné:

   .one-block { position: relative; } 
   

3. ajouté le dernier élément de ce bloc ->.mobile-mask:

   <div class="one-block"> 
       .... 
       <div class="mobile-mask"></div> 
   </div> 
   

4. positionné .mobile-mask:

   .mobile-mask { 
       position: absolute; 
       top: 0; 
       bottom: 0; 
       left: 0; 
       right: 0; 
   } 
   

5. cacher pour non-mobile (cette partie n'est pas du tout précis: juste avec css. si vous détectez des appareils mobiles par d'autres moyens et, par exemple, donnez une classe à un corps, ce sera plus précis. dans ce cas, je juste besoin d'une solution rapide):

   @media (min-width: 681px) { 
       .mobile-mask { 
       display: none; 
       } 
   } 
   

6. créer javascript qui va ajouter/supprimer .hover classe:

   $('.mobile-mask').on('click', function(){ 
       $('.list .mobile-mask').show(); 
       $('.list .one-block').removeClass('hover'); 
       $(this).hide(); 
       $(this).parent().addClass('hover'); 
   }); 
   $(window).on('resize', function(event){ 
       var windowWidth = $(this).width(); 
       if(windowWidth > 680){ 
       $('.list .one-block').removeClass('hover'); 
       } 
   });