触摸设备 HTML 元素：悬停状态答案

【问题标题】：Touch device HTML element :hover state触摸设备 HTML 元素：悬停状态
【发布时间】：2011-08-05 22:43:38
【问题描述】：

有一个 HTML 按钮，有 3 个背景 - 分别代表正常、悬停和单击状态。当然，它适用于非触摸设备。如果在触摸设备上单击按钮，也会触发 :hover 状态并一直保持到另一个元素被触摸。

是否可以在单击元素后以编程方式从元素中删除 :hover 状态或阻止它在触摸设备上激活？

抱歉，我们不接受有关检测 mouseover 和 mouseout 事件以及添加人工类的建议。

一种可能的解决方案是提前在 html 元素中添加“no-touch”类，如果仅检测到触摸设备，则将其删除。在这种情况下，CSS 选择器“html.no-touch button:hover”将不匹配触摸设备。

你知道你可能会建议更优雅的解决方案吗？

【问题讨论】：

我们是不是假设没有:hover 就不能过日子？例如，出于某种原因，:hover 只是没有被使用是一个问题，因为在我看来，其他两个状态应该可以正常工作。
忽略 :hover 支持，将使没有触摸设备的用户的 Web 应用程序的交互性降低一些。如果找不到可靠的解决方案，则将删除此要求，因为 :hover on touch device 会产生更多的视觉问题。
有趣。我原以为移动浏览器会忽略:hover，因为无论如何您实际上都无法将鼠标悬停在元素上。

【解决方案1】：

我会尝试在手持设备的附加样式表中覆盖:hover 状态，例如：

<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">

在handheld.css 中输入如下内容：

#some_selector:hover {
    background: none;    /* if you are setting a background in the main css file for example */
}

但是，我不确定handheld 和触摸屏是否完全一样，可能有些设备带有触摸屏并且不具备手持设备的资格。

编辑：您似乎无法 100% 可靠地检测到触摸屏设备，另请参阅 this question。

【讨论】：

【解决方案2】：

似乎可以通过覆盖媒体查询中给定元素的 :hover 状态来解决此问题 - 请参阅此问题：

【讨论】：