Как сделать, чтобы :hover не работал на мобильных экранах в @media?

Рейтинг: 0Ответов: 2Опубликовано: 04.05.2023

Мне нужно, чтобы :hover не работал у тега (a) и тега (button).

Я нашёл решение в том, что нужно писать :hover отдельно в @media, а не в общих стилях. Но я не уверен, что это верный способ решения. Какие способы ещё есть?

Пример: media (min-width: 1440px) podcasts: hover { color: #ff0000;

.podcasts {
  font-size: 20px;
  font-family: sans-serif;
  color: #121723
}

.podcasts:hover {
  color: #ff0000;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
<a href="#lala" class="podcasts">Подкасты</a>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

На мобильном устройстве нет такого понятия как hover, поскольку нет курсора, а соответственно и наведения никакого нет. Потому на мобильном устройстве (именно на устройстве) вы не увидите срабатывания данного условия. Однако при отладке в devtool если вы "изменяете" устройство или его размер (в браузере) - вы можете наблюдать изменение при наведении. И в таком случае только медиа запросы помогают переназначить поведение. Что вы и осуществили.

▲ 0

Не все устройства поддерживают hover и поэтому он применяется уже при клике через media.

Это можно узнать:

  // если поддерживает
  @media (hover: hover) {
    .podcasts:hover {
      color: #ff0000;
      -webkit-transition: 0.4s;
      -o-transition: 0.4s;
      transition: 0.4s;
    }
  }

  // если нет
  @media (hover: none) {
    .podcasts {
      font-size: 20px;
      font-family: sans-serif;
      color: #121723;
    }
  }