Тестирую на устройстве с ios 9 и при клике срабатывает стиль hover. Как сделать, чтобы стиль наведения не срабатывал на мобильных устройствах?
2 ответа
- Проверяем наличие тач-события и вешаем соответствующий класс, если это десктоп
- Ховер-стили пишем с каскадом, например:
.no-touch a:hover { color: red }
if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
console.log('this is a touch device');
} else {
console.log('this is not a touch device');
document.body.classList.add('no-touch');
}
body.no-touch {
background-color: blue;
}
a {
color: yellow
}
.no-touch a:hover {
color: lightgreen;
}
<a href="#">ссылка для примера</a>
-
1
Попробуй поместить hover-стили в медиа-запрос на pointer
@media (pointer: fine) {
Хотя такой вариант попрортит стили в браузерах, т. к. много где не поддерживается.
Лучше выставить стили без hover для :hover
в
@media (pointer: coarse) {