CSS:悬停/:(移动)触摸设备上的焦点与点击事件

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 。

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

也许安全！