Как убрать hover на мобильных устройствах?

1964
21 мая 2017, 22:15

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

Answer 1
  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>

Answer 2

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

@media (pointer: fine) {

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

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

@media (pointer: coarse) {
READ ALSO
Можно ли в одном запросе получить данные с 3-х и более таблиц с разной структурой

Можно ли в одном запросе получить данные с 3-х и более таблиц с разной структурой

Можно ли, одним запросом, получить данные из 3-х таблиц,

280
Как сделать update JTable?

Как сделать update JTable?

Можете подсказать, как обновить данные в JTable? Заранее спасибо!

392
Почему объект, реализующий Iterable, ведет себя как множество?

Почему объект, реализующий Iterable, ведет себя как множество?

У меня есть код, в котором экземпляр класса, реализующего интерфейс Iterable, помещен в цикл foreach, и это не только не вызывает у компилятора возражений,...

284
Быстрое преобразование Фурье. Частоты

Быстрое преобразование Фурье. Частоты

ЗдравствуйтеЗаинтересовался реализацией выделением нот и распознаванием сигналов исходя из нот

319