Comment faire pour supprimer/ignorer :hover css style sur les appareils tactiles

Il existe de multiples solutions pour ce problème.

Rapide n'dirty - supprimer :hover styles à l'aide de JS

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

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

if (hasTouch()) { //remove all :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 (ce qui signifie pas d'Cdn). Désactive plane sur les souris & appareils tactiles comme la Surface, qui fait mal au UX.

CSS uniquement utiliser des requêtes de média

Placez tous vos :hover règles dans un @media bloc:

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

ou sinon, remplacer tous vos hover règles (compatible avec les anciens navigateurs):

a:hover { color: blue; }

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

Limitations: ne fonctionne que sur iOS 9.0+, Chrome pour Android ou Android 5.0+ lors de l'utilisation de WebView. hover: hover pauses effets de survol sur les navigateurs plus anciens, hover: none besoins écrasant tous définies précédemment règles CSS. Les deux sont incompatible avec un mélange de souris & appareils tactiles.

Le plus robuste - utilisation spéciale de la classe CSS et de détecter le contact via JS

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

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

La hasHover classe peuvent être ajoutés à l'aide de hasTouch() de premier exemple: le

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

Cependant, cela a le même problème avec un mélange de toucher les appareils comme les exemples précédents, qui nous apporte la solution ultime. Activer le survol des effets à chaque fois que le curseur de la souris est déplacé, désactiver les effets de survol à chaque fois qu'une touche est détectée.

function watchForHover() {
    var hasHoverClass = false;
    var container = document.body;
    var lastTouchTime = 0;

    function enableHover() {
        //filter emulated events coming from touch events
        if (new Date() - lastTouchTime < 500) return;
        if (hasHoverClass) return;

        container.className += ' hasHover';
        hasHoverClass = true;
    }

    function disableHover() {
        if (!hasHoverClass) return;

        container.className = container.className.replace(' hasHover', '');
        hasHoverClass = false;
    }

    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 active/désactive la fonction hover styles en tant que de besoin. Essayer ici: https://jsfiddle.net/dkz17jc5/19/

Je fais face à un problème similaire actuellement.

Il y a deux principal options qui se produisent à moi immédiatement: (1) l'utilisateur de la chaîne de contrôle, ou (2) le maintien de séparer les pages mobiles en utilisant une URL différente et d'avoir les utilisateurs à choisir ce qui est mieux pour eux.

1. Si vous êtes en mesure d'utiliser l'internet conduit à bande langage comme le PHP ou Ruby, vous pouvez vérifier la chaîne utilisateur de l'appareil demande une page, et il suffit de servir le même contenu, mais avec une <link /> au lieu de le style normal.

Utilisateur chaînes d'informations sur l'identification du navigateur, moteur de rendu, système d'exploitation, etc. Il serait à vous de décider quels sont les dispositifs de "toucher" par rapport aux non-tactile. Vous pouvez être en mesure de trouver cette information disponible quelque part et carte dans votre système.

A. Si vous êtes autorisé à ignorer les vieux navigateurs, vous avez juste à ajouter une seule règle à la normale, non mobiles, css, à savoir: MODIFIER: Erk. Après avoir fait quelques essais, j'ai découvert les dessous de la règle désactive également la possibilité de suivre les liens dans webkit-navigateurs en plus de la simple cause de l'effet esthétique pour être désactivée, voir http://jsfiddle.net/3nkcdeao/
en tant Que tel, vous aurez besoin d'être un peu plus sélectif sur la façon de modifier les règles pour le cas de mobile que ce que je montre ici, mais il peut être un point de départ utile:

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

Au passage, la désactivation de l'aiguille des événements sur un parent, puis de l'activer explicitement sur un enfant provoque actuellement aucune placez-les effets sur la mère de redevenir actif si un enfant-élément entre dans :hover.

Voir http://jsfiddle.net/38Lookhp/5/

B. Si vous êtes à l'appui de l'héritage web-moteurs de rendu, vous aurez à faire un peu plus de travail le long de la lignes de la suppression de toutes les règles qui définissent les styles spéciaux au cours de :hover. Pour sauver tout le monde de temps, vous pourriez juste voulez construire un système automatisé de copie + seding commande que vous exécutez sur votre standard des feuilles de style pour créer les versions mobiles. Qui vous permettra de simplement écrire/mise à jour le code standard et récurez n'importe quel style-règles d'utilisation :hover pour la version mobile de vos pages.

1. (I) Sinon, il suffit de faire vos utilisateurs conscients que vous avez une m.website.com pour les appareils mobiles, en plus de votre website.com. Si subdomaining est la façon la plus commune, vous pourriez aussi avoir d'autres prévisible modification d'une URL donnée pour permettre aux utilisateurs mobiles d'accéder à des pages modifiées. À ce stade, vous voulez être sûr de ne pas avoir à modifier l'URL à chaque fois qu'elle passe à une autre partie du site.

Encore une fois ici, vous pouvez peut-être juste ajouter une règle supplémentaire ou deux pour les feuilles de style ou être forcé à faire quelque chose de légèrement plus compliqué de sed ou un utilitaire similaire. Il serait probablement plus facile à appliquer :ne pas vos règles de style comme div:not(.disruptive):hover {... dans lequel vous ajoutez class="disruptive" à des éléments faisant des choses ennuyeuses pour les utilisateurs mobiles à l'aide de js ou la langue du serveur, au lieu de munging le CSS.

1. (II) Vous pouvez combiner les deux premières et (si vous pensez qu'un utilisateur a erré à la mauvaise version d'une page), vous pouvez suggérer qu'ils passent dans le mobile-type d'affichage, ou tout simplement avoir un lien quelque part qui permet aux utilisateurs de flop en arrière et en avant. Comme déjà indiqué, @media queries pourrait aussi être quelque chose à regarder à utiliser dans la détermination de ce qui est utilisé pour visiter.

2. (III) Si vous êtes pour un jQuery solution une fois que vous savez quels sont les dispositifs de "toucher" et qui ne le sont pas, vous pourriez trouver CSS hover ne pas être ignoré sur les appareils à écran tactile utile.

essayez ceci:

@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é de le specs (https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1).

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

Javascript:

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

CSS Exemple:

<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 rappelons-nous, il y a de plus en plus tactile des appareils sur le marché, qui sont aussi de soutenir les actions de la souris en même temps.

Selon Jasons répondre nous permet de répondre qu'à des appareils qui ne supportent pas de passer pur css media queries. Nous pouvons également aborder uniquement les périphériques qui prennent en charge stationnaire, comme moogals répondre à une question similaire, avec
@media not all and (hover: none). Il semble bizarre, mais ça fonctionne.

J'ai fait un mixin Sass de ce 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 la Moyenne qui passe à travers tous les différents appareils que nous pouvons cibler avec les CSS. En gros c'est un mix de ces règles, de les combiner pour objectifs 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 objectifs spécifiques:

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

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

J'aime mixin, c'est comment je l'utilise:

@mixin is-touch {
    @media (hover: none) and (pointer: coarse) {
        @content;
    }
}

Essayez ceci (j'en arrière-plan et la couleur d'arrière-plan 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;
}