mobile safari liens conserve le focus après contact

Ma navigation est assez simple. J'ai un état de pointage qui ajoute une bordure et un dégradé transparent png arrière-plan à un texte, et une classe supplémentaire qui, lorsqu'ils sont ajoutés par jQuery, ajoute de la couleur derrière cette image transparente.

Si vous cliquez sur pour basculer de la classe dans un navigateur web, vous verrez la couleur viennent dans et hors, mais l'image de fond reste si vous n'avez jamais déplacer la souris en dehors du bouton. Ce comportement est normal.

Mon problème est que lors de l'utilisation d'un iPad, le tactile semble conserver l'état de pointage et le :hover propriétés ne jamais s'en aller, sauf si vous cliquez sur un autre bouton, auquel cas la persistance de l' :hover propriétés sont ajoutées à ce bouton jusqu'à ce que l'autre est pressé.

Je ne peux pas imaginer que je suis la première à ce problème, mais les recherches n'ai pas tourné que quoi que ce soit.

Aider?

mobile safari liens conserve le focus après contact

Normal - Hover - Actif (via addClass() )

  • ma seule pensée pour aujourd'hui est d'ajouter un script qui supprime le CSS pour le :hover propriété lors de l'affichage dans le navigateur Safari Mobile 🙁
InformationsquelleAutor d2burke | 2012-05-17
  1. 16

    Hover est un CSS pseudo classe conçu pour fonctionner avec un pointeur non pas tant les événements tactiles. Vous voulez normalement d'éviter l'utilisation de planer complètement, car il n'a pas de sens sur mobile. L'une des façons les plus faciles à traiter est de placer votre hover CSS à l'intérieur d'une requête de média. Vous pouvez le faire en ciblant les tablettes ou écrans de bureau, ici, sont les deux solutions:

    1 - Ciblage ipad:

    @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 postes de travail: 

    @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 */ 
    }
}

    Est valide. Vous pouvez modifier les valeurs de min et max de la largeur si vous remarquez que le CSS est déclenché de manière incorrecte dans certains appareils.

    • C'est une excellente idée. Assurez-vous de ne pas le supprimer pour tous les utilisateurs ou vous sera difficile de voir malvoyantes et à mobilité réduite les utilisateurs. Ce n'est que bien.
    • Appareil largeur est de plus en plus un facteur non pertinent pour distinguer les appareils tactiles de pointeur périphériques d'entrée. Est-il une autre requête des médias qui pourrait être utilisé?
    • Bonne astuce, résolu mon iOS passez question. Mais je pense que le bureau de la requête doit utiliser min-device-width, donc il faudra encore travailler sur les ordinateurs de bureau avec une réduction des fenêtres de navigateur.
    InformationsquelleAutor charlitosJS
  2. 20

    Si vous êtes à l'aide de Modernizr, le no-touch classe sera ajouté à la racine de l'élément html pour non-touch. Ensuite, vous pouvez faire ceci:

    a.myclass {
   color:#999;
}

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

    C'est la façon dont je l'ai corrigé pour ma liste avec un hover:

    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 passez la souris sur l'arrière bouton de navigation...

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

    ou

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

    Pour les non-initiés, l'événement unload se produit avant que le navigateur quitte la page. En brouillant tous les liens dans la page sur les décharger, j'ai été en mesure de non-bâton de l'état de pointage. Retour à la page d'origine en utilisant le bouton précédent montre le lien cliqué dans l'état par défaut.

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

    Coincé Sur :hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/
    Utilisation de jQuery pour remplacer - http://www.nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload/

    • onunload est obsolète sur moderne safari en faveur de certains bizarre pagehide.
    InformationsquelleAutor Zymotik
  4. 2

    J'ai couru à travers cette question. Mon problème est sur l'iPad, si j'ai puisé une ancre et d'un défilement légèrement, cliquez sur un événement n'est pas le feu, mais l'élément permettrait de conserver l'état de pointage CSS. Ma conviction est que l'iPad a été fait en conservant un état de focalisation et de l'application de l' :hover styles CSS dans un effort pour simuler l'expérience de bureau.

    Un non-JS et pratiques de contournement est de ne pas livrer passez de styles pour les appareils tactiles s'il n'est pas un besoin pour eux. Les appareils tactiles n'ont pas un "véritable" état de pointage, mais il semble que hover est simulé lorsqu'un élément est concentré ou taraudés-et-défile sur.

    Donc, avec Modernizr.js chargé, j'ai déplacé mon hover styles dans le champ d'application de l' .no-touch -

    c'est à dire

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

    Puis, lorsque l'élément est cliqué, je suis basculement d'une classe active sur elle.

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

    Le seul point négatif à emporter est que vous n'obtenez pas une "mise à profit de l'état". Je n'ai pas encore étudier une solution pour que, comme il n'est pas vraiment important pour mes applications.

    • La "mise à profit de l'etat" sera juste :active sélecteur.
    • Nice, c'est un je ne viens pas souvent. Merci.
    • Vous avez besoin de regarder dehors pour les appareils tactiles que FAIRE passer de l'état, comme la Surface de Microsoft. Le stylet (ou la souris) fournir passez la souris et l'écran est tactile.
    • Il n'est pas optimale et difficile à utiliser par exemple avec bootstrap.
    • C'est assez vieux, j'irais avec @Redtopia l'approche de ces jours. stackoverflow.com/a/22796450/845717.
    InformationsquelleAutor BradGreens
  5. 1

    vous avez besoin pour attraper les événements suivants

    évènements touchstart - lorsque votre doigt touche l'écran

    touchend - lorsque votre doigt quitte l'écran

    pense que le stationnaire et unhover, si vous pouvez poster du code, nous pouvons vous aider 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
});

    Donner un exemple de code, les évènements touchstart et la fin devrait résoudre le problème

    • Grâce Huangism, mais à partir de là je ne sais pas quoi faire pour obtenir le lien à perdre le focus. .blur() ne coupe pas comme il le fait avec les contrôles de formulaire.
    • J'avais déjà modifié le "évènements touchstart' code 'touchend" et ça ne fonctionne pas. je peux sans aucun doute l'événement le feu sur touchend (merci pour cela, je vais l'utiliser quelque part d'autre, même si cela ne fonctionne pas), mais il ne fera pas le lien pour perdre le focus
    InformationsquelleAutor Huangism
  6. 1

    C'est un vieux post, mais j'ai eu du mal avec cela aujourd'hui en 2019, et je trouve cette solution propre et je veux le 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, c'est à l'aide de planer dans n'importe quel appareil avec mécanisme de pointeur. Aujourd'hui, il existe des logiciels avec html lecteurs pour une meilleure accessibilité du site et ne doit pas être une bonne idée, désactiver :hover pour tous les appareils mobiles.
    Juste pour être clair, n'importe quel appareil, sans pointer du mécanisme hover ne prendra pas effet, sinon, nous avons appliqué le :hover style.

    InformationsquelleAutor Kenny Hank
  7. 0

    Si vous utilisez SCSS, je vous recommande de faire ce qui 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 <= 768px resolution

    InformationsquelleAutor juanjinario
  8. -5

    C'est une solution de contournement:

    var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);
    InformationsquelleAutor debain