Comment supprimer/ignorer: hover CSS style sur les appareils tactiles

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

merci à réponse de Calsal j'ai trouvé quelque chose qui je crois va exclure pratiquement tous les navigateurs de bureau parce qu'il semble être reconnu par les navigateurs mobiles que j'ai essayé (voir capture d'écran d'une table compilée: CSS pointer feature detection table ).

MDN web docs state that

le pointeur css @media peut être utilisé pour appliquer des styles basés sur si l'utilisateur principal du mécanisme d'entrée est un dispositif de pointage, et dans l'affirmative, quelle est son exactitude?

.

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

donc vous pouvez construire une requête média comme Calsal décrit mais légèrement modifié. 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;
    }
}

Compiled CSS:

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 ce gist j'ai créé après des recherches sur le problème. Codepen pour la recherche empirique.

mise à JOUR : Au moment d'écrire cette mise à jour, 2018-08-23, et souligné par @DmitriPavlutin cette technique ne semble plus fonctionner avec Firefox desktop.

c'est aussi une solution possible, mais vous devrez passer par votre css et ajouter une classe .no-touch avant vos styles de vol stationnaire.

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>

Source

P. S. Mais il ne faut pas oublier qu'il y a de plus en plus d'appareils tactiles sur le marché, qui prennent également en charge l'entrée des souris.

ce n'est peut-être pas encore une solution parfaite (et c'est avec jQuery) mais c'est peut-être une direction / concept sur lequel travailler: qu'en est-il de le faire dans l'autre sens? Ce qui signifie désactiver les États CSS hover 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 dire d'autre contre le fait de le faire de cette façon?

peut-être comme ceci:

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");
});

il a été utile pour moi: 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");
                    }
                }
            }
        }
    }
}

Selon Jasons réponse nous pouvons aborder uniquement pour les appareils qui ne supportent pas de passer pur css media queries. Nous pouvons également traiter que les dispositifs qui prennent en charge le vol stationnaire, comme moogals réponse dans une question similaire, avec @media not all and (hover: none) . Il semble bizarre, mais ça fonctionne.

j'en ai fait un mélange Sass pour en faciliter l'utilisation:

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

ce qui suit changerait la couleur de fond de .container du rouge au bleu en vol stationnaire pour les dispositifs qui le supportent et restent rouges pour les dispositifs tactiles:

.container {
    background-color: red;

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

cela peut être résolu avec sass/scss et une requête multimédia avec le point de rupture désiré.

.myclass {
    background-color: blue;
    &:hover {
        @media screen and (max-width: 320px) {
            background-color: red;
        }
    }
}