Comportement Hover sur le bureau et l'iPad

Je connais une autre façon de le faire (mais je ne pense pas que ce soit beaucoup mieux).

Pour activer l'effet css .hover, vous devez append onclick vide à l'élément:

 <div class="hoverable" onclick="">...</div> 

L'effet Hover fonctionne lorsque vous touchez un élément, mais ne fonctionne pas lorsque vous le touchez et le maintenez enfoncé. Et je ne l'ai pas testé sur des appareils Android. Mais c'est un travail sur ipad (chrome mobile et safari).

PS Aussi, je vous recommand d'append le style CSS ci-dessous pour tous les éléments, que l'user peut toucher ou toucher et maintenir:

 -webkit-user-select: none; 

Cette option désactive la boîte de dialog Couper / Copier / Coller avec l'élément. Et ne l'utilisez pas pour tous les documents.

Évitez de countr sur: hover

S'appuyant sur :hover limite les options sur les appareils mobiles. JavaScript ou jQuery ne permet pas de désactiver l'état :hover d'un élément.

Vous pouvez également append et supprimer une class .hover aide d'une combinaison d'events de souris et d'events tactiles. Si nécessaire, n'ajoutez pas les events de la souris si vous détectez la prise en charge des events tactiles.

Voici une démonstration de JSFiddle avec deux menus de vol stationnaire. Pour l'exécuter sur un appareil mobile, utilisez cette version autonome de la démo . Le premier menu utilise le pseudo-élément :hover , et le second utilise une class .hover .

Sur les browsers de bureau, les deux menus se comportent de la même manière. Mais pour les appareils tactiles, la suggestion de @ ErwaySoftware a été appliquée au deuxième menu: Si vous touchez l'élément de menu une deuxième fois sur un appareil tactile, la list déroulante disparaît. Bien sûr, ceci n'est approprié que si l'élément de menu lui-même n'est pas un hyperlink fonctionnel (si le seul but est d'ouvrir la list déroulante).

jQuery

 // Mouse events $('.menu > li').on('mouseover', function(){ $(this).addClass('hover'); }); $('.menu > li').on('mouseout', function(){ $(this).removeClass('hover'); }); // Touch events $('.menu > li > a').on('touchend', function(){ $(this).parent().toggleClass('hover'); }); 

Assurez-vous de tester sur Android, avant de procéder très loin avec une solution.

Mobile d'abord

L'approche la plus simple et la plus simple consiste peut-être à éviter de s'appuyer sur les états de vol stationnaire lors de la prise en charge des périphériques mobiles, et de s'appuyer sur les clics / touches pour faire apparaître et disparaître les menus. En d'autres termes, construisez d'abord pour le mobile, puis déterminez comment le faire fonctionner sur les browsers de bureau (au lieu de l'inverse).

Voici mon travail ci-dessous. J'ajoute la class 'clicked' qui a le style de la class originale du button mais aussi avec! Important en annexe … (voir ci-dessous).

 $('#your_button').click(function() { // Removing the old class if there was one $(this).removeClass('clicked'); // Adding clicked class $(this).addClass('clicked'); // DO THE REST OF YOUR BUTTON CODE HERE return false; }); #your_button{ background: #ff0000; color:#fff } #your_button:hover{ background: #88888; color:#fff } #your_button.clicked{ background: #ff0000 !important; color:#fff !important; }