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 事件使其更加稳定？

- user31782

---

@Roberrrt 真的，我以前的工作一直使用这种方法，但现在我有点怀疑。 - user31782

应该没问题。 - Jeroen

我能想到的唯一令人担忧的情况是，如果所涉及的元素无法获得焦点，则无法在其上下文中使用下拉菜单。 - roberrrt-s

@Roberrrt 是的。对于不可聚焦的元素，我认为悬停状态是必须的。 - user31782

如果您使用带有:target的<a>元素或带有:checked的<input type="checkbox">，则可以避免整个问题。据我所知，没有浏览器会考虑篡改链接/表单功能。 - junkfoodjunkie

Answer 1

我认为对于大多数悬停效果，只使用CSS就可以了。只要你不介意当用户单击其他元素时，菜单或其他内容被关闭的情况。

据我所知，没有任何移动浏览器不遵循这种行为，至少主要的移动浏览器都支持。如果任何一个主要的浏览器不再支持这种行为，那么移动Web的大部分内容都需要重建。

很可能是安全的！

- Xan

---

是的，你说得有道理。如果某些设备或浏览器不遵守这种行为，很多网站将无法正常工作。 - user31782

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>

- roberrrt-s

Answer 3

根据我的经验，这种方法不够可靠。也许曾经可以使用，但在2020年，它不能与当前的浏览器兼容。

更好的方式是使用指针类型为“coarse”的媒体查询：

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

有关针对触屏设备的 Medium 文章

除了 IE 浏览器，此方法可适用于所有浏览器。相关详情请参见MDN。

- davidhartman00

---

2020年在哪里没有可靠地工作？ - Dan

@Dan - 用户31782提供的建议解决方案在iPhone上并不一致。一致性是关键词。此时我无法记住哪个浏览器存在问题。但由于我们只在我过去的雇主中为Safari或Chrome测试了iPhone，所以必须是其中之一。很抱歉我不能提供更多帮助。 - davidhartman00