При создании каскадного меню сайта, реализованного при помощи ненумерованного списка, с вложенным тегом <ul>, которое должно было появляться при наведении на родительский <li>, столкнулся с тем, что псевдокласс hover дико переглючивает на iPad, отчего меню совсем перестает работать.
К счастью, исправляется это очень просто, достаточно добавить атрибут aria-haspopup к тегу, на который вы навешиваете hover:
<ul> <li aria-haspopup="true"> Developers <ul> <li> <a>Javadocs</a> </li> <li> <a>GitHub</a> </li> <li> <a>Build Server</a> </li> </ul> </li> </ul>
При включении свойства aria-haspopup реакция веб-страницы для посетителей, использующих мышь или клавиатуру, не изменяется. Кроме того, применение свойства aria-haspopup для этой цели не влияет на его использование в качестве свойства стандарта доступности полнофункциональных интернет-приложений (Accessible Rich Internet Applications).
Знакомые разработчики также советуют прописать курсор, правда я это не проверял:
li:hover {
cursor: pointer;
}
Не рекомендуется использовать наведение указателя для скрытого содержимого, с которым может взаимодействовать пользователь. Вместо этого попробуйте использовать событие onclick для переключения видимости.
Ссылки
Источник: https://www.kobzarev.com/makeup/ispravlyaem-css-hover-e-ffekt-na-tach-ustroystvah/
