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>

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

所以我的问题是：

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

Answer 1

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

据我所知，没有任何移动浏览器不遵守此行为，至少不是主要浏览器。如果任何一个主要浏览器放弃了这个，移动网络的很大一部分将需要重建。

可能安全！

Answer 2

根据我的经验，这并不是真正的黑客，而是一种用纯 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 ...
}

针对触摸设备的中型文章

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

Answer 4

.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>