Question

有一个HTML按钮，有3个背景 - 每个按钮用于正常，悬停和点击状态。当然，它适用于非触摸设备。如果在触摸设备上单击按钮，则：触发悬停状态并保持直到触摸另一个元素。

是否可以以编程方式删除：单击后从元素悬停状态或阻止其在触摸设备上激活？

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

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

你知道更多优雅的解决方案吗？

Answer 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。

Answer 2

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