Как отменить hover-стиль на мобильных устройствах или преобразовать его в focus?

Question

[Biff]

Имеется класс, например:
.tables th:hover {background:#ddd;}

На ПК (без тачскрина) при наведении мышкой на строку таблицы меняется её фон с белого на #ddd.
Проблема в том, что при прокрутке на тачскринах (телефонах), на месте установки пальца на экране (на строке таблицы) фон #ddd застывает и не станет вновь белым до того, пока я не нажму на другую область экрана.

Хотелось бы понять, как можно решить эту проблему.
Т.е. нужно, чтобы на touch-устройствах .tables th:hover {background:#ddd;} отрабатывал или как .tables th:focus {background:#ddd;}, или вообще как .tables th:hover {background:#fff;}

Как такое можно реализовать на чистом JS или CSS?
На сайте используется JQuery. Modernizr не используется и подключать его из-за такой неприятной мелочи не хочется.

Comments

[alex-1917]

щас проверил примерно на 6 клиентских проектах - там таблицы с ховер-эффектом от третьего бутстрапа - вообще ни одной жалобы от клиентов на тему так называемой "проблемы" за 2,5 года!!)))) ХАХ!
мальчик-то был?

Answer 1

[ksnk]

А вот, кому jQuery лапши?

$(document).on("touchstart", ".tables th", function() {
  $(this).addClass("active");
}).on("touchend", ".tables th", function() {
  $(this).removeClass("active");
});

Ну стили доработать напильником

.tables th:hover, .tables th.active {background:#ddd;}

Comments

[Biff]

Немного не то.

Answer 2

[Vaha Vaynahskiy]

Попробуй так:

@media (max-width: 768px){
.tables th:hover {background:none !important;}
.tables th:focus {background:#ddd;}
}

Comments

[Biff]

Спасибо, но это не для тач-устройств, а для разрешений меньше 768 px в ширину.

[alex-1917]

biffick, проверяли на реальном устройстве или теоретические выкладки?))

biffick, ну поставь @media (max-width: 1024px) и вся недолга. Требуемый эффект будет достигнут для всех экранов до 1024px, это практически все от смартфонов до айпадов, если найдешь такой декстоп или ноутбук, свистни, пополню свою коллекцию фантастики...
И да - открою небольшой секрет - та-дам! - @media width это ширина области просмотра, на современных устройствах она мало связана с разрешением)))
А вы уповаете на разрешение - это немного другое))) @media resolution

[Biff]

Понятно...