exeypanteleev-tap
Время для прочтения: 0 мин. 25 сек.

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

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.