web-dev-qa-db-fra.com

Supprimer tous les effets de survol via css

Lorsque je descends sur des appareils tactiles, je ne veux pas le comportement de survol. Est-il possible de désactiver tous les effets de survol en même temps pour tout un site Web?

Étant donné que vous utilisez Modernizr pour détecter le toucher et définir la classe.

C’est ce que j’ai proposé, mais cela donne beaucoup d’incohérences:

html.touch *:hover {
    color: inherit !important;
    background: inherit !important;
}

Est-il possible de faire cela avec du CSS pur? Sinon, comment faire avec javascript?

javascripthtmlcssmodernizr
8
Simon Pertersen

C'est bon mais pasSUPPORTÉtrès bien:

html.touch *:hover {
    all:unset!important;
}

Mais cela a un très bonSUPPORT:

html.touch *:hover {
    pointer-events: none !important;
}

Cela fonctionne parfaitement pour moi, cela fait en sorte que tous les effets de survol soient comme si vous appuyiez sur un bouton, il s'allumera mais ne deviendra pas un buggy comme effet de survol initial pour les événements de souris.

13
Simon Pertersen

Essayez le all:unset ou all:initial

html.touch *:hover {
    all:unset!important;
}

Le support est limité ( https://developer.mozilla.org/en-US/docs/Web/CSS/all )

1
Gabriele Petrioli

Essayer une solution fourre-tout sera probablement délicat. Je voudrais simplement convertir n'importe où dans votre css où vous avez défini un survol:

.thing:hover {}

inclure la classe Modernizr:

html.no-touch .thing:hover {}

Bien que vous sachiez bien que toute solution utilisant Modernizr ne sera pas une "solution CSS pure", car Modernizr est javascript.

1
rwacarter