Исправляем css hover эффект на тач-устройствах

При создании каскадного меню сайта, реализованного при помощи ненумерованного списка, с вложенным тегом <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 для переключения видимости.

Ссылки

• Fixing css hover effect on touch devices
• Рекомендации по созданию сайтов с поддержкой сенсорного управления
• Fix CSS hover on iPhone/iPad/iPod

CSS hover HTML HTML5 iPad iPhone responsive touch