Как отменить hover в css для мобильных устройств

есть правило в css

#catalog-list .item a.img:hover {
color: red;
}

В мобильных устройствах естественно сначало срабатывает hover , на некоторых устройствах бывает так что после hover почти сразу срабатывает click, но восновном до это не доходит и чтобы перейти по ссылке приходится ещё раз нажимать на ссылку....

Если возможность отменить этот только для моб устройств?
0
css верстка мобильная

1 ответов

во первых надо сдетектить мобильное устройство и от этого уже думать как это отменить.

Если средствами чистого CSS то вы можете детектить мобильные устройства по разрешению экрана правилом:
@media only screen and (min-width: ЗНАЧЕНИЕ_КОТОРОЕ_СОЧТЕТЕ_ВЕРНЫМpx) {
#catalog-list .item a.img:hover {
color: red;
}
}

Таким образом, это правило применится только для устройств с разрешением экрана больше указанного в min-width.

Так же можно это правило кидать JSом и детектить мобильники тамже.
Ну а с серверной части тут вообще безконечное множество решений..

0