2

Тестирую на устройстве с ios 9 и при клике срабатывает стиль hover. Как сделать, чтобы стиль наведения не срабатывал на мобильных устройствах?

2 ответа 2

2
  1. Проверяем наличие тач-события и вешаем соответствующий класс, если это десктоп
  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
  • 1
    Спасибо вам ) !
    – brin gonor
    Commented 20 мая 2017 в 20:34
0

Попробуй поместить hover-стили в медиа-запрос на pointer

@media (pointer: fine) {

Хотя такой вариант попрортит стили в браузерах, т. к. много где не поддерживается.

Лучше выставить стили без hover для :hover в

@media (pointer: coarse) {

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.