проблема с CSS на iPad

Question

У меня есть страница с 5 подлинками, имеющими класс "searchBySub" Теперь в моем CSS я определил нормальные состояния при наведении, а также класс для нажатия Итак, у нас есть

#leftNav .searchBySub {...}
#leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}

Мой вопрос: при нажатии любой из этих 5 подссылок на iPad он переходит в состояние наведения. Так есть ли способ, которым я могу заставить его не переходить в состояние наведения, а применить класс searchBySubClicked

Поскольку состояние зависания вызывает некоторые проблемы ... Пожалуйста, помогите мне. Спасибо.

Answer 1

Я обнаружил (случайно), что, когда к элементу, вызывающему состояние :hover, применено CSS-переходов , появляется iOS, которая игнорирует состояние наведения и вместо этого запускает щелчок.

В моем случае я на самом деле хотел состояние наведения, чтобы работать, но не мог заставить его работать, пока я не удалил переходы (или исключил их специально на iOS). Можно опубликовать пример кода, если кто-то захочет.

Answer 2

Другой вариант - включить в вашу сборку modernizr, который добавит класс touch / no-touch к вашему тегу .Затем вы можете настроить таргетинг тега hover только на устройства без сенсорного экрана:

#leftNav .searchBySub {...)
.no-touch #leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}

http://modernizr.com/

Answer 3

Если вы хотите пойти по пути JavaScript, вы можете использовать jQuery mobile http://jquerymobile.com/ и вызывать события кликов, которые добавляют ваш класс.Обычный jQuery приводит к проблемам, поскольку он не принимает сенсорные события, аппаратное обеспечение Apple запускает

Answer 4

Я согласен с медиа-запросами, но вот так http://css -tricks.com / snippets / css / ipad-specific-css /

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

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

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
    #leftNav a.searchBySub:hover {...}    
}

.

Answer 5

регулирует наведение на экранные устройства с помощью медиазапросов в заголовках HTML.http://www.w3.org/TR/css3-mediaqueries/

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