html - CSS :hover behaviour on touchscreen devices

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?