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

Posted 2023-05-08

【中文标题】CSS：触摸屏设备上的悬停行为

【英文标题】：CSS :hover behaviour on touchscreen devices

【发布时间】：2017-01-12 12:49:46

【问题描述】：

我正在开发一个 CSS 框架，它尽可能地依赖于简单、最小和纯 CSS。我想要的是在悬停时打开某些东西，例如下拉菜单，但是我不确定如何在移动设备上仅使用 CSS 来实现这一点。

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

我在一个规则中同时使用:focus 来覆盖尽可能多的环境和案例，但是我不确定这是否适用于许多设备。所以我的问题是：

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

【问题讨论】：

从营销的角度来看，在点击设备上使用悬停并不是一个好习惯。普通用户不知道如何正确使用。这让他们感到困惑，他们离开了。用户喜欢点击彩色的大按钮。

@cdm 你所说的对我来说听起来非常正确和合乎逻辑。你有什么更好的建议吗？您是否建议我将我的下拉菜单变成通过单击工作的按钮（使用复选框黑客使它们成为纯 CSS 或类似的）？

【参考方案1】：

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

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

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

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

最常见的解决方案是使用 javascript touchevents，但如果您要使用全 CSS，那将不适合您。

您可能会在这里Hover effects using CSS3 touch events 或:touch CSS pseudo-class or something similar? 找到有用的东西

【讨论】：

就 (1) 而言，我在想类似于 Firefox for android 所做的事情，即它在第一次点击时应用悬停样式。但是，您所描述的内容肯定会让人感到尴尬，这正是我想要避免的，这就是为什么我要问移动设备究竟是如何处理这些事件的。至于其余的，我认为 Safari 缺乏支持对我来说是一个很大的禁忌，所以我应该尝试一些不同的东西。我会检查您提供的链接，非常感谢！