Исправляем 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 для переключения видимости.

Ссылки

Источник: https://www.kobzarev.com/makeup/ispravlyaem-css-hover-e-ffekt-na-tach-ustroystvah/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: