web-dev-qa-db-fra.com

les liens de safari mobile restent concentrés après le toucher

Ma navigation est assez simple. J'ai un état de survol qui ajoute une bordure et un fond png dégradé transparent à du texte, et une classe supplémentaire qui, lorsqu'elle est ajoutée par jQuery, ajoute de la couleur derrière cette image transparente.

Si vous cliquez pour basculer la classe dans un navigateur Web, vous verrez la couleur entrer et sortir, mais l'image d'arrière-plan reste si vous n'éloignez jamais la souris du bouton. Il s'agit d'un comportement attendu.

Mon problème est que lorsque vous utilisez un iPad, le toucher semble conserver l'état de vol stationnaire et les propriétés: hover ne disparaissent jamais sauf si vous cliquez sur un autre bouton, auquel cas les propriétés persistantes: hover sont ajoutées à ce bouton jusqu'à ce qu'un autre soit enfoncé.

Je ne peux pas imaginer que je suis le premier avec ce problème, mais les recherches n'ont rien révélé.

Aidez-moi?

enter image description here

Normal - Survol - Actif (via addClass ())

jquerycssipadmobile-safari
31
d2burke

Hover est une pseudo-classe CSS conçue pour fonctionner avec un pointeur pas tellement avec des événements tactiles. Vous voudriez normalement éviter complètement l'utilisation du vol stationnaire car cela n'a aucun sens sur mobile. L'un des moyens les plus simples de résoudre ce problème consiste à placer votre CSS de survol dans une requête multimédia. Vous pouvez le faire en ciblant des tablettes ou des écrans de bureau, voici les deux solutions:

1- Ciblage des iPads:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

2- Ciblage des bureaux:

@media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

L'une ou l'autre manière est valide. Vous pouvez modifier les valeurs de largeur min et max si vous remarquez que le CSS est déclenché de manière incorrecte sur certains appareils.

16
charlitosJS

Si vous utilisez Modernizr, la classe sans contact sera ajoutée à l'élément racine html pour les appareils non tactiles. Ensuite, vous pouvez le faire:

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}
20
Redtopia

Voici comment je l'ai corrigé pour ma liste avec un survol:

CSS:

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery:

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

Et un correctif pour le survol de la navigation au dos du bouton ...

<body onunload="$('a').blur();">

ou

$(window).unload( function () { $('a').blur(); } );

Pour les non-initiés, l'événement de déchargement se produit juste avant que le navigateur ne quitte la page. En brouillant tous les liens de la page sur le déchargement, j'ai pu retirer l'état de vol stationnaire. Le retour à la page d'origine à l'aide du bouton de retour affiche le lien cliqué dans l'état par défaut.

Malheureusement, un événement onclick ne semble pas déclencher le déchargement, mais une actualisation le fait dans iOS 5?!

Stuck On: hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ Utilisez jQuery pour remplacer - http: // www .nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload /

2
Zymotik

J'ai également rencontré ce problème. Mon problème était sur l'iPad, si je tapais sur une ancre et que je faisais défiler légèrement, un événement de clic ne se déclenche pas, mais l'élément conserve le CSS d'état de vol stationnaire. Ma conviction est que l'iPad conservait en fait un état de focus et appliquait les styles CSS: hover dans le but de simuler l'expérience de bureau.

Une solution de contournement non JS et pratique consiste à ne pas fournir de styles de survol aux appareils tactiles s'ils n'en ont pas besoin. Les appareils tactiles n'ont pas un état de vol stationnaire "réel", mais il semble que le vol stationnaire soit simulé lorsqu'un élément est focalisé ou tapoté et défilé.

Donc avec Modernizr.js chargé, j'ai déplacé mes styles de survol dans la portée de .no-touch -

c'est à dire.

/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
  /* hover styles */
}

Ensuite, lorsque l'élément est cliqué, je bascule une classe active dessus.

.my-element.active {
  /* active styles */
}

Le seul point négatif à retenir est que vous n'obtenez pas un "état exploité". Je n'ai pas encore cherché de solution pour cela car ce n'est pas vraiment important pour mes applications.

2
BradGreens

vous devez attraper les événements suivants

touchstart - lorsque votre doigt touche l'écran

touchend - lorsque votre doigt quitte l'écran

pensez à survoler et à décrocher, si vous pouvez publier du code, nous pouvons vous aider davantage si vous ne comprenez pas ce que je dis

$('element').on('touchstart', function(){
    // apply hover styles, or better yet addClass() of hover styles
});

$('element').on('touchend', function(){
    // removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});

Donnez un exemple de code, le démarrage et la fin devraient résoudre le problème

1
Huangism

C'est un vieux post mais je me débattais avec ça aujourd'hui en 2019, et je trouve cette solution propre et je veux la partager avec vous tous.

<a href="#">Try hovering over me!</a>

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

Fondamentalement, ce que nous faisons ici est d'utiliser le survol dans n'importe quel appareil doté d'un mécanisme de pointeur. De nos jours il existe des logiciels avec des lecteurs html pour une meilleure accessibilité du site et ne devrait pas être une bonne idée, désactivez: survolez pour tous les appareils mobiles. Juste pour être clair, tout appareil sans mécanisme de pointage le survol ne prendra pas effet, sinon nous avons appliqué le style: survol.

0
Kenny Hank

Si vous utilisez SCSS, je vous recommande de procéder comme suit:

// primary-buttons
.primary-button, .primary-button:visited,
.primary-button:focus {
    background: red;
    color: white;
}

.primary-button:hover {
    background: green; // Only for big screens
    @media(max-width: 768px) {
        background: red;
    }
}

Si vous réinitialisez la valeur de l'arrière-plan à la valeur initiale, vous n'aurez plus de problèmes avec le bouton enfoncé sur les appareils avec une résolution <= 768px

0
juanjinario