Как сделать, чтобы :hover не работал на мобильных экранах в @media?
Мне нужно, чтобы :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>Ответы (2 шт):
На мобильном устройстве нет такого понятия как hover, поскольку нет курсора, а соответственно и наведения никакого нет. Потому на мобильном устройстве (именно на устройстве) вы не увидите срабатывания данного условия. Однако при отладке в devtool если вы "изменяете" устройство или его размер (в браузере) - вы можете наблюдать изменение при наведении. И в таком случае только медиа запросы помогают переназначить поведение. Что вы и осуществили.
Не все устройства поддерживают 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;
}
}