Comment supprimer / ignorer: survoler le style CSS sur les appareils tactiles

Je souhaite ignorer toutes les :hoverdéclarations CSS si un utilisateur visite notre site Web via un appareil tactile. Parce que le :hoverCSS n'a pas de sens, et il peut même être dérangeant si une tablette le déclenche par clic / tap, car il pourrait alors rester jusqu'à ce que l'élément perde le focus. Pour être honnête, je ne sais pas pourquoi les appareils tactiles ressentent le besoin de se déclencher :hoveren premier lieu - mais c'est la réalité, donc ce problème est également la réalité.

a:hover {
   color:blue;
   border-color:green;
   // etc. > ignore all at once for touch devices
}

Alors, (comment) puis-je supprimer / ignorer toutes les :hoverdéclarations CSS à la fois (sans avoir à connaître chacune d'elles) pour les appareils tactiles après les avoir déclarées?

tl; dr utilisez ceci: https://jsfiddle.net/57tmy8j3/

Si vous êtes intéressé par la raison ou les autres options disponibles, lisez la suite.

Quick'n'dirty - supprimer: survoler les styles à l'aide de JS

Vous pouvez supprimer toutes les règles CSS contenant :hover utilisation de Javascript. Cela a l'avantage de ne pas avoir à toucher CSS et d'être compatible même avec les navigateurs plus anciens.

function hasTouch() {
  return 'ontouchstart' in document.documentElement
         || navigator.maxTouchPoints > 0
         || navigator.msMaxTouchPoints > 0;
}

if (hasTouch()) { // remove all the :hover stylesheets
  try { // prevent exception on browsers not supporting DOM styleSheets properly
    for (var si in document.styleSheets) {
      var styleSheet = document.styleSheets[si];
      if (!styleSheet.rules) continue;

      for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
        if (!styleSheet.rules[ri].selectorText) continue;

        if (styleSheet.rules[ri].selectorText.match(':hover')) {
          styleSheet.deleteRule(ri);
        }
      }
    }
  } catch (ex) {}
}

Limitations: les feuilles de style doivent être hébergées sur le même domaine (cela signifie pas de CDN). Désactive les survols sur les périphériques mixtes souris et tactiles tels que Surface ou iPad Pro, ce qui nuit à l'UX.

CSS uniquement - utiliser des requêtes multimédias

Placez toutes vos règles: hover dans un @mediabloc:

@media (hover: hover) {
  a:hover { color: blue; }
}

ou bien, remplacez toutes vos règles de survol (compatible avec les anciens navigateurs):

a:hover { color: blue; }

@media (hover: none) {
  a:hover { color: inherit; }
}

Limitations: fonctionne uniquement sur iOS 9.0+, Chrome pour Android ou Android 5.0+ lors de l'utilisation de WebView. hover: hoverinterrompt les effets de survol sur les anciens navigateurs, hover: nonedoit remplacer toutes les règles CSS précédemment définies. Les deux sont incompatibles avec les périphériques mixtes souris et tactiles .

Le plus robuste - détecter le toucher via JS et ajouter CSS: règles de survol

Cette méthode doit précéder toutes les règles de survol avec body.hasHover. (ou un nom de classe de votre choix)

body.hasHover a:hover { color: blue; }

La hasHoverclasse peut être ajoutée en utilisant à hasTouch()partir du premier exemple:

if (!hasTouch()) document.body.className += ' hasHover'

Cependant, cela aurait les mêmes inconvénients avec les dispositifs tactiles mixtes que les exemples précédents, ce qui nous amène à la solution ultime. Activez les effets de survol chaque fois qu'un curseur de souris est déplacé, désactivez les effets de survol chaque fois qu'un contact est détecté.

function watchForHover() {
  // lastTouchTime is used for ignoring emulated mousemove events
  let lastTouchTime = 0

  function enableHover() {
    if (new Date() - lastTouchTime < 500) return
    document.body.classList.add('hasHover')
  }

  function disableHover() {
    document.body.classList.remove('hasHover')
  }

  function updateLastTouchTime() {
    lastTouchTime = new Date()
  }

  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)

  enableHover()
}

watchForHover()

Cela devrait fonctionner essentiellement dans n'importe quel navigateur et activer / désactiver les styles de survol selon les besoins.

Voici l'exemple complet - moderne: https://jsfiddle.net/57tmy8j3/
Legacy (à utiliser avec les anciens navigateurs): https://jsfiddle.net/dkz17jc5/19/

Adaptation du pointeur à la rescousse!

Comme cela n'a pas été touché depuis un certain temps, vous pouvez utiliser:

a:link {
   color: red;
}

a:hover {
   color:blue;
}

@media (hover: none) {
   a:link {
      color: red;
   }
}

Regardez cette démo à la fois dans le navigateur de votre ordinateur et dans celui de votre téléphone . Pris en charge par les appareils tactiles modernes .

Remarque : gardez à l'esprit que, puisque l'entrée principale (capacité) d'un Surface PC est une souris, elle finira par être un lien bleu, même s'il s'agit d'un écran (tablette) détaché. Les navigateurs utiliseront (devraient) toujours par défaut la capacité d'entrée la plus précise.

J'ai rencontré le même problème (dans mon cas avec les navigateurs mobiles Samsung) et je suis donc tombé sur cette question.

Merci à la réponse de Calsal j'ai trouvé quelque chose qui, je pense, exclura pratiquement tous les navigateurs de bureau car il semble être reconnu par les navigateurs mobiles que j'ai essayés (voir capture d'écran d'un tableau compilé: tableau de détection des fonctionnalités du pointeur CSS ).

Les documents Web MDN indiquent que

La fonctionnalité de pointeur CSS @media peut être utilisée pour appliquer des styles en fonction du fait que le mécanisme d'entrée principal de l'utilisateur est un périphérique de pointage et, le cas échéant, de sa précision.

.

Ce que j'ai découvert est ce pointeur: grossier est quelque chose qui est inconnu de tous les navigateurs de bureau dans le tableau ci-joint mais connu de tous les navigateurs mobiles dans le même tableau. Cela semble être le choix le plus efficace car toutes les autres valeurs de mot-clé de pointeur donnent des résultats incohérents.

Par conséquent, vous pouvez créer une requête multimédia comme Calsal décrit mais légèrement modifiée. Il utilise une logique inversée pour exclure tous les appareils tactiles.

Sass mixin:

@mixin hover-supported {    
    /* 
     * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 
     * coarse: The primary input mechanism includes a pointing device of limited accuracy.
     */
    @media not all and (pointer: coarse) {
        &:hover {
            @content;
        }
    }
}

a {
    color:green;
    border-color:blue;

    @include hover-supported() {
        color:blue;
        border-color:green;
    }
}

CSS compilé:

a {
  color: green;
  border-color: blue;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
    border-color: green;
  }
}

Il est également décrit dans cet essentiel que j'ai créé après avoir étudié le problème. Codepen pour la recherche empirique.

MISE À JOUR : Au moment de la rédaction de cette mise à jour, 2018-08-23, et soulignée par @DmitriPavlutin, cette technique ne semble plus fonctionner avec le bureau Firefox.

Selon la réponse de Jason, nous ne pouvons adresser que les périphériques qui ne prennent pas en charge le survol avec des requêtes multimédias css pures. Nous pouvons également adresser uniquement les périphériques qui prennent en charge le survol , comme la réponse de moogal à une question similaire, avec @media not all and (hover: none). Ça a l'air bizarre mais ça marche.

J'en ai fait un mixin Sass pour une utilisation plus facile:

@mixin hover-supported {
    @media not all and (hover: none) {
        &:hover {
            @content;
        }
    }
}

Mise à jour 2019-05-15 : Je recommande cet article de Medium qui passe par tous les différents appareils que nous pouvons cibler avec CSS. Fondamentalement, il s'agit d'un mélange de ces règles multimédias, combinez-les pour des cibles spécifiques:

@media (hover: hover) {
    /* Device that can hover (desktops) */
}
@media (hover: none) {
    /* Device that can not hover with ease */
}
@media (pointer: coarse) {
    /* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
    /* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
    /* Device with no pointing */
}

Exemple pour des cibles spécifiques:

@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
}

J'adore les mixins, c'est ainsi que j'utilise mon mixin hover pour cibler uniquement les périphériques qui le prennent en charge:

@mixin on-hover {
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            @content;
        }
    }
}

button {
    @include on-hover {
        color: blue;
    }
}

Je suis confronté à un problème similaire actuellement.

Il y a deux options principales qui me viennent immédiatement à l'esprit: (1) la vérification de la chaîne utilisateur, ou (2) le maintien de pages mobiles séparées en utilisant une URL différente et en demandant aux utilisateurs de choisir ce qui est le mieux pour eux.

1. Si vous êtes capable d'utiliser un langage de ruban adhésif Internet tel que PHP ou Ruby, vous pouvez vérifier la chaîne utilisateur de l'appareil demandant une page, et simplement servir le même contenu mais avec un <link rel="mobile.css" />style au lieu du style normal.

Les chaînes utilisateur ont des informations d'identification sur le navigateur, le moteur de rendu, le système d'exploitation, etc. Ce serait à vous de décider quels appareils sont «tactiles» ou non tactiles. Vous pourrez peut-être trouver ces informations quelque part et les mapper dans votre système.

R. Si vous êtes autorisé à ignorer les anciens navigateurs , il vous suffit d'ajouter une seule règle au css normal, non mobile, à savoir: EDIT : Erk. Après avoir fait quelques expériences, j'ai découvert que la règle ci-dessous désactive également la possibilité de suivre les liens dans les navigateurs Webkit en plus de désactiver simplement les effets esthétiques - voir http://jsfiddle.net/3nkcdeao/
En tant que tel, vous aurez pour être un peu plus sélectif quant à la façon dont vous modifiez les règles du boîtier mobile que ce que je montre ici, mais cela peut être un point de départ utile:

* { 
    pointer-events: none !important; /* only use !important if you have to */
}

En guise de remarque, la désactivation des événements de pointeur sur un parent, puis leur activation explicite sur un enfant, fait que tous les effets de survol sur le parent redeviennent actifs si un élément enfant entre :hover.
Voir http://jsfiddle.net/38Lookhp/5/

B. Si vous prenez en charge les moteurs de rendu Web hérités, vous devrez faire un peu plus de travail pour supprimer toutes les règles qui définissent des styles spéciaux pendant :hover. Pour gagner du temps à tout le monde, vous voudrez peut-être simplement créer une commande de copie + sédation automatisée que vous exécuterez sur vos feuilles de style standard pour créer les versions mobiles. Cela vous permettrait simplement d'écrire / mettre à jour le code standard et de supprimer toutes les règles de style utilisées :hoverpour la version mobile de vos pages.

2. (I) Sinon, informez simplement vos utilisateurs que vous disposez d'un m.website.com pour les appareils mobiles en plus de votre site Web.com . Bien que le sous-domaine soit le moyen le plus courant, vous pouvez également avoir une autre modification prévisible d'une URL donnée pour permettre aux utilisateurs mobiles d'accéder aux pages modifiées. À ce stade, vous voudrez vous assurer qu'ils n'ont pas à modifier l'URL chaque fois qu'ils naviguent vers une autre partie du site.

Là encore, vous pourrez peut-être ajouter une ou deux règles supplémentaires aux feuilles de style ou être obligé de faire quelque chose d'un peu plus compliqué en utilisant sed ou un utilitaire similaire. Ce serait probablement plus facile à appliquer: pas à vos règles de style comme div:not(.disruptive):hover {...dans lesquelles vous ajouteriez class="disruptive"des éléments à des choses ennuyeuses pour les utilisateurs mobiles utilisant js ou le langage serveur, au lieu de modifier le CSS.

2. (II) Vous pouvez en fait combiner les deux premiers et (si vous pensez qu'un utilisateur a erré vers la mauvaise version d'une page), vous pouvez lui suggérer de basculer dans / hors de l'affichage de type mobile, ou simplement d'avoir un lien quelque part qui permet aux utilisateurs de flop d'avant en arrière. Comme déjà indiqué, les requêtes @media peuvent également être utiles pour déterminer ce qui est utilisé pour visiter.

3. (III) Si vous êtes partant pour une solution jQuery une fois que vous savez quels appareils sont "tactiles" et lesquels ne le sont pas, vous pouvez trouver utile que le survol CSS n'est pas ignoré sur les appareils à écran tactile .

essaye ça:

@media (hover:<s>on-demand</s>) {
    button:hover {
        background-color: #color-when-NOT-touch-device;
    }
}

MISE À JOUR: malheureusement, le W3C a supprimé cette propriété des spécifications ( https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).

Vous pouvez utiliser Modernizr JS (voir également cette réponse StackOverflow ) ou créer une fonction JS personnalisée:

function is_touch_device() {
 return 'ontouchstart' in window        // works on most browsers 
  || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};

if ( is_touch_device() ) {
  $('html').addClass('touch');
} else {
  $('html').addClass('no-touch');
} 

pour détecter la prise en charge de l' événement tactile dans le navigateur, puis attribuer une CSSpropriété régulière , en parcourant l'élément avec la html.no-touchclasse, comme ceci:

html.touch a {
    width: 480px;
}

/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
   width: auto;
   color:blue;
   border-color:green;
}

Cela m'a été utile: lien

function hoverTouchUnstick() {
    // Check if the device supports touch events
    if('ontouchstart' in document.documentElement) {
        // Loop through each stylesheet
        for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
            var sheet = document.styleSheets[sheetI];
            // Verify if cssRules exists in sheet
            if(sheet.cssRules) {
                // Loop through each rule in sheet
                for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
                    var rule = sheet.cssRules[ruleI];
                    // Verify rule has selector text
                    if(rule.selectorText) {
                        // Replace hover psuedo-class with active psuedo-class
                        rule.selectorText = rule.selectorText.replace(":hover", ":active");
                    }
                }
            }
        }
    }
}

C'est également une solution de contournement possible, mais vous devrez parcourir votre css et ajouter une .no-touchclasse avant vos styles de survol.

Javascript:

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

Exemple CSS:

<style>
p span {
    display: none;
}

.no-touch p:hover span {
    display: inline;
}
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

La source

Ps Mais nous devons nous rappeler que de plus en plus d'appareils tactiles arrivent sur le marché, qui prennent également en charge la saisie de la souris en même temps.

Ce n'est peut-être pas encore une solution parfaite (et c'est avec jQuery) mais c'est peut-être une direction / un concept sur lequel travailler: qu'en est-il du faire l'inverse? Ce qui signifie désactiver les états: hover css par défaut et les activer si un événement mousemove est détecté n'importe où sur le document. Bien sûr, cela ne fonctionne pas si quelqu'un a désactivé js. Qu'est-ce qui pourrait empêcher de procéder de cette façon?

Peut-être comme ça:

CSS:

/* will only work if html has class "mousedetected" */
html.mousedetected a:hover {
   color:blue;
   border-color:green;
}

jQuery:

/* adds "mousedetected" class to html element if mouse moves (which should never happen on touch-only devices shouldn’t it?) */
$("body").mousemove( function() {
    $("html").addClass("mousedetected");
});

Essayez ceci (j'utilise background et background-color dans cet exemple):

var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');

if (ClickEventType == 'touchstart') {
            $('a').each(function() { // save original..
                var back_color = $(this).css('background-color');
                var background = $(this).css('background');
                $(this).attr('data-back_color', back_color);
                $(this).attr('data-background', background);
            });

            $('a').on('touchend', function(e) { // overwrite with original style..
                var background = $(this).attr('data-background');
                var back_color = $(this).attr('data-back_color');
                if (back_color != undefined) {
                    $(this).css({'background-color': back_color});
                }
                if (background != undefined) {
                    $(this).css({'background': background});
                }
            }).on('touchstart', function(e) { // clear added stlye="" elements..
                $(this).css({'background': '', 'background-color': ''});
            });
}

css:

a {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

La manière sale ... Pas élégante, mais la manière la plus simple qui peut vous sauver.

Supprimez tout ce qui caractérise le survol.

.your-class:hover:before {
  color: blue;
  background: linear-gradient(to bottom, rgba(231,56,39,0) 0%, #aaaaaa 100%);
}

@media all and (min-width:320px) and (max-width: 960px) {
    .your-class:hover:before {
    color: black;
    background: transparent;
  }
}

Si votre problème est lorsque vous touchez / appuyez sur Android et tout le div couvert par une couleur bleue transparente! Ensuite, vous devez simplement changer le

CURSEUR: POINTER; vers CURSOR: DEFAULT;

utilisez mediaQuery pour vous cacher dans le téléphone mobile / tablette.

Cela fonctionne pour moi.

Essayez cette solution jquery 2019 facile, bien que cela existe depuis un certain temps;

1. ajoutez ce plugin à la tête:

   src = "https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"

2. ajoutez ceci à js:

   $ ("*"). on ("touchend", function (e) {$ (this) .focus ();}); // s'applique à tous les éléments

3. Voici quelques variantes suggérées:

   $ (": input,: checkbox,"). on ("touchend", function (e) {(this) .focus);}); // spécifier des éléments

   $ ("*"). on ("cliquer, toucher", function (e) {$ (this) .focus ();}); // inclure l'événement de clic

   css: corps {curseur: pointeur; } // touchez n'importe où pour mettre fin à un focus

Remarques

• placer le plugin avant bootstrap.js pour éviter d'affecter les info-bulles
• testé uniquement sur l'iphone XR ios 12.1.12 et l'ipad 3 ios 9.3.5, en utilisant Safari ou Chrome.

Références:

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/