На ПК (без тачскрина) при наведении мышкой на строку таблицы меняется её фон с белого на #ddd.
Проблема в том, что при прокрутке на тачскринах (телефонах), на месте установки пальца на экране (на строке таблицы) фон #ddd застывает и не станет вновь белым до того, пока я не нажму на другую область экрана.
Хотелось бы понять, как можно решить эту проблему.
Т.е. нужно, чтобы на touch-устройствах .tables th:hover отрабатывал или как .tables th:focus , или вообще как .tables th:hover
Как такое можно реализовать на чистом JS или CSS?
На сайте используется JQuery. Modernizr не используется и подключать его из-за такой неприятной мелочи не хочется.
Всем привет, прошу совета.
Есть выпадающее меню, реализованное через css :hover, т.е. есть пункт меню, при наведении срабатывает hover и подменю у данного пункта меняет свойство display на block, после того как убрали мышь, снова становится none. На обычном ПК все хорошо, но на мобильных из-за отсутствия возможности просто навести данная реализация не работает. Как можно это поправить? Чтобы на мобильных устройствах меню тоже выпадало (сейчас при клике оно выпадает, но сразу же переходит по ссылке на первом пункте). Если же это нереально, то как можно реализовать меню, чтобы оно было выпадающим и работало на всех устройствах (те примеры, что я находил через jquery, не подходят, т.к. там основные пункты меню не работают как ссылки, т.е. при клике на них меню просто выпадает, а нужен переход).
Тут из пункта О компании выпадает Вакансии.
Псевдокласс :hover в сочетании со свойством transition часто применяется для создания различных анимационных эффектов при наведении курсора мыши на элемент. На мобильных устройствах :hover по понятным причинам не работает — там нет курсора, а взаимодействие происходит касанием пальца. Поэтому для создания эффектов заменим :hover на :focus .
Надо учитывать, что фокус могут получить не все элементы веб-страницы, а только ссылки, кнопки, поля формы. Чтобы заставить работать :focus для, скажем, изображений, надо добавить к ним атрибут tabindex — он позволяет переходить к изображениям через клавишу Tab . В качестве значения указываются целые числа, переход происходит от элемента с меньшим значением к элементу с большим значением.
В примере 1 добавлено три , при щелчке по картинке происходит увеличение масштаба через свойство transform. Стоит щёлкнуть по другой картинке или свободному месту веб-страницы, как изображение возвращается к исходному размеру.
Пример 1. Масштабирование картинок при фокусе
Результат данного примера показан на рис. 1.
Рис. 1. Масштабирование картинок при получении фокуса
Чтобы :focus работал для , к ним добавлен атрибут tabindex , что к тому же позволяет переходить от одной картинке к другой через клавишу Tab .