tl; dr используйте это: https://jsfiddle.net/57tmy8j3/
Если вам интересно, почему или какие есть другие варианты, читайте дальше.
Quick'n'dirty - удалить: парить стили, используя JS
Вы можете удалить все правила CSS, содержащие :hover
с помощью Javascript. Преимущество этого в том, что вам не нужно трогать CSS и быть совместимым даже с более старыми браузерами.
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) {}
}
Ограничения: таблицы стилей должны размещаться в одном и том же домене (это означает, что нет CDN). Отключает зависания на смешанных мышах и сенсорных устройствах, таких как Surface или iPad Pro, что вредно для UX.
Только CSS - используйте медиазапросы
Поместите все свои правила: hover в @media
блок:
@media (hover: hover) {
a:hover { color: blue; }
}
или, альтернативно, переопределите все ваши правила наведения (совместимые со старыми браузерами):
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
Ограничения: работает только на iOS 9.0+, Chrome для Android или Android 5.0+ при использовании WebView. hover: hover
устраняет эффекты парения в старых браузерах, hover: none
требует переопределения всех ранее определенных правил CSS. Оба несовместимы со смешанными мышью и сенсорными устройствами .
Самое надежное - обнаруживать касания с помощью JS и добавлять CSS: правила наведения
Этот метод требует добавления всех правил наведения body.hasHover
. (или имя класса по вашему выбору)
body.hasHover a:hover { color: blue; }
hasHover
Класс может быть добавлен с помощью hasTouch()
из первого примера:
if (!hasTouch()) document.body.className += ' hasHover'
Однако это может иметь те же недостатки со смешанными сенсорными устройствами, что и в предыдущих примерах, что приводит нас к окончательному решению. Включить эффекты наведения при каждом перемещении курсора мыши, отключить эффекты при наведении при каждом касании.
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()
Это должно работать в основном в любом браузере и включать / отключать стили при наведении.
Вот полный пример - современный: https://jsfiddle.net/57tmy8j3/
Legacy (для использования со старыми браузерами): https://jsfiddle.net/dkz17jc5/19/