CSS：触摸屏设备上的悬停行为

Question

我正在开发一个CSS框架，它尽可能地依赖于简单，最小和纯CSS 。我想要的是在悬停时打开下拉菜单等特定内容，但我不确定如何在移动设备上仅使用CSS实现此功能。

之前检查过this answer，我确认了我部分知道的事实：某些移动浏览器和设备在点击元素时会使用:hover伪类，这样我就可以打开下拉我想要的方式。其他人说:active也有效。

我在一个规则中同时使用这两个规则，以及:focus以涵盖尽可能多的环境和案例，但我不确定这会在许多设备上运行良好。所以我的问题是：

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

Answer 1

这几乎是一堆问题的重复，但我想谈谈你的要点：

1. “基于悬停的下拉列表”是指只要用户将手指放在上面就会出现的内容？作为移动用户，我无法想象这是一个成功的用户体验

2. 所有伪类都在https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes我认为“互动”的是:active，:checked，:focus，:hover。正如您所说，:hover的问题在于它得不到很好的支持，而且它并不真正适合用户与移动网站交互的方式。 :checked的问题在于它依赖于复选框，这对受支持的标记施加了相当严格的限制。

3. 肯定是移动版Safari不支持它，这意味着它是一个非常重要的问题。

最常见的解决方案是使用javascript touchevents，但如果你要使用不适合你的所有CSS。

您可以在Hover effects using CSS3 touch events或:touch CSS pseudo-class or something similar?

找到有用的内容