CSS在触摸屏设备上如何处理:hover行为

Question

我正在开发一个CSS框架，尽可能地保持简单、最小和纯CSS。我想让一些东西在鼠标悬停时打开，但是我不确定如何在移动设备上只使用CSS实现这一点。

之前我查看了这个答案，确认了我部分了解的内容：某些移动浏览器和设备在点击元素时会使用:hover伪类，这将允许我按照自己的方式打开下拉菜单。其他人说，:active也可以起作用。

我在一个规则中同时使用两者，以及:focus以尽可能覆盖多种环境和情况，但是我不确定这在许多设备上是否能够很好地工作。所以我的问题是：

• 有没有办法确保基于hover的下拉组件能够在各种设备上正常工作？
• 有没有伪类或属性可用于特定浏览器或类似物，以确保覆盖大多数设备？
• 是否有关于触摸屏、移动设备或移动浏览器行为以及它们如何处理悬停事件的文档？

- Angelos Chalaris

---

从市场营销的角度来看，在触摸设备上使用 hover 不是一个好的做法。普通用户不知道如何正确使用它，这会使他们感到困惑并且离开。用户喜欢点击大而且色彩鲜艳的按钮。 - cdm

@cdm，你说的听起来非常正确和合乎逻辑。你有更好的建议吗？你建议我把下拉菜单变成通过点击工作的按钮（使用复选框技巧使它们成为纯CSS或类似方法）吗？ - Angelos Chalaris

Answer 1

这几乎是一堆已经有的问题，但我想回答你的主要观点：

1. “基于hover的下拉菜单”是指只要用户手指放在其上就会出现的菜单？作为移动用户，我无法想象这样做是否成功。

2. 所有虚类都在此处 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes 我认为“可交互”的是 :active、:checked、:focus、:hover。像你所说的，:hover存在问题，因为它支持得不好，并且与用户与移动站点的交互方式并不相符。而:checked的问题在于它依赖于复选框，这对支持的标记语言有相当严格的限制。

3. 肯定移动版Safari不支持它，这意味着这是一个足够大的问题。

最常见的解决方案是使用JavaScript触摸事件，但如果您使用全CSS，那么这种方法将无法实现。

您可以在这里找到一些有用的信息Hover effects using CSS3 touch events 或者这里 :touch CSS pseudo-class or something similar?

- henry

---

就（1）而言，我正在考虑像Android版Firefox所做的那样，即在第一次点击时应用悬停样式。但是，您所描述的绝对感觉很尴尬，正是我想避免的，这就是为什么我正在询问移动设备如何处理这些事件的原因。至于其余部分，我认为Safari不支持足够大，所以我应该尝试不同的东西。我会查看您提供的链接，非常感谢！ - Angelos Chalaris