CSS: hover /: focus vs click event on (mobile) touch devices

Question

Часто я нахожусь в ситуациях, когда мне нужно отображать меню при наведении, а меню мобильных устройств должно открываться по щелчку. Теперь, например, Рассмотрим следующий пример:

.btn { 
 
    width: 200px; 
 
    background-color: #333; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
.menu { 
 
    display: none; 
 
    padding: 15px; 
 
} 
 
.btn:hover .menu { 
 
    display: block; 
 
} 
 
.btn:focus .menu { 
 
    display: block; 
 
}

<div class="btn"> 
 
    Button 
 
    <div class="menu">I am menu</div> 
 
</div>

Теперь это автоматически работает на мобильных устройствах, так как состояние при наведении липкий на сенсорных устройствах. Но этот хак применим ко всем сенсорным устройствам? То есть, стоит ли риск? Будет ли какое-то сенсорное устройство не обладать зависанием? Очевидно, что альтернативой является назначение событий touch/click с помощью JavaScript на сенсорных устройствах, но это кажется лишним, потому что я не видел сенсорного устройства, у которого нет липких состояний зависания?

Так что мой вопрос:

Можно ли использовать парение состояния хака или я должен использовать событие JavaScript, чтобы сделать его более пуленепробиваемый?

Answer 1

Я бы сказал, что все в порядке, чтобы просто придерживаться css для большинства зависаний, если вы в порядке с меню или закрытием, когда пользователь щелкает отдельным элементом.

Я не знаю ни о каких мобильных браузерах, которые не придерживаются такого поведения, по крайней мере, не являются основными. Если какой-либо из основных браузеров упадет, огромный перерыв в мобильной сети потребуется перестроить.

Наверное, безопасно!

Answer 2

По моему опыту, это не хак, а скорее способ имитировать события наведения с чистым CSS. В основном я использую :hover/:focus для таких вопросов, потому что

1.) Они надежны.

2.) Дешевые (с точки зрения kb).

Для создания одного и того же объекта требуется только два правила и внешний HTTP-запрос, чтобы включить правило для полностью функционирующего меню, но несколько строк JavaScript (или, ужас, jQuery).

То, что я сказал в комментарии, вы должны или могли бы применять атрибут tabindex, чтобы заставить элемент быть фокусируемый, такие как:

<div class="non-focusable-clickable-hover-element" tabindex="-1">I cannot be focussed<div> 

<div class="focusable-hover-element" tabindex="1">I can be focussed<div>