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 @media
bloc:
@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: hover
interrompt les effets de survol sur les anciens navigateurs, hover: none
doit 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 hasHover
classe 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/