有一个 HTML 按钮，有 3 种背景 - 每一种用于正常、悬停和单击状态。当然，它适用于非触摸设备。如果按钮在触摸设备上被点击，:hover 状态也会被触发并保持直到另一个元素被触摸。
是否有可能在点击元素后以编程方式从元素中删除 :hover 状态或阻止它在触摸设备上激活？
抱歉，我们不接受检测鼠标悬停和鼠标移出事件以及添加人工类的建议。
一种可能的解决方案是预先将“无触摸”类添加到 html 元素，如果仅检测到触摸设备则将其删除。在这种情况下，CSS 选择器“html.no-touch button:hover”将不匹配触摸设备。
您是否知道可以建议的更优雅的解决方案？
最佳答案
我会尝试在手持设备的附加样式表中覆盖 :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 */
}
但是，我不确定手持设备和触摸屏是否完全相同，可能有些设备有触摸屏但不符合手持设备的条件。
编辑: 看来您无法 100% 可靠地检测到触摸屏设备，另请参阅 this question .
关于javascript - 触摸设备 HTML 元素 :hover state，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5670551/