CSS :hover/:focus 与（移动）触摸设备上的点击事件

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>

现在这会在移动设备上自动运行，因为悬停状态在触摸设备上是粘性的。 但是这个hack适用于所有的触摸设备吗？ 也就是说，值得冒险吗？ 会不会有一些触摸设备没有悬停状态粘性？ 显然，另一种方法是在触摸设备上使用 JavaScript 分配触摸/点击事件，但这似乎是多余的，因为我还没有看到任何没有粘性悬停状态的触摸设备？

所以我的问题是：

可以使用悬停状态 hack 还是应该使用 JavaScript 事件来使其更加防弹？

Answer 1

我想说对于大多数悬停坚持使用 css 就可以了，只要您对菜单或用户单击单独元素时关闭的任何内容都满意。

我不知道有任何不遵守这种行为的移动浏览器，至少不是主要的。 如果任何主要浏览器都放弃了这一点，则需要重建大量的移动网络。

应该是安全的！

Answer 2

以我的经验，这并不是真正的 hack，而是一种使用纯 CSS 模仿悬停事件的方法。 我主要使用:hover/:focus来解决这类问题，因为

1.) 他们是可靠的。

2.) 便宜（以 kb 计）。

只需要 2 条规则，不需要外部 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>

Answer 3

根据我的经验，这并不可靠。 它可能一次又一次。 但它不适用于 2020 年的当前浏览器。

更好的是对粗略类型的指针使用媒体查询：

@media(hover: none) and (pointer: coarse){
... CSS styling in here ...
}

关于定位触摸设备的中篇文章

这适用于除 IEMDN 详细信息之外的所有浏览器