触摸设备HTML元素:hover状态

Question

4

有一个HTML按钮，有三种背景 - 普通状态、悬停状态和点击状态。当然，在非触摸设备上它可以正常工作。如果在触摸设备上点击按钮，则:hover状态也会被触发并保持，直到触摸到另一个元素。

是否有可能在元素被点击后以编程方式删除:hover状态或防止其在触摸设备上激活？

抱歉，不接受检测mouseover和mouseout事件并添加人工类的建议。

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

您是否知道更优雅的解决方案可以建议吗？

- Zygimantas

我们是否可以假设你不能没有:hover而正常工作？也就是说，由于我认为其他两种状态应该可以正常工作，因此不使用:hover似乎是个问题。 - Gordon Seidoh Worley

忽略:hover支持，将使没有触摸设备的用户的网络应用程序稍微不那么互动。如果找不到可靠的解决方案，将删除此要求，因为在触摸设备上使用:hover会导致更多的视觉问题。 - Zygimantas

2

有趣。我本来以为移动浏览器会忽略:hover，因为你实际上无法悬停在一个元素上。 - Gordon Seidoh Worley

2个回答

0

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

- bzx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jeroen · Accepted Answer

我会尝试在额外的针对手持设备的样式表中覆盖: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 */
}

然而，我不确定 手持设备 和触摸屏幕是否完全相同，可能存在具有触摸屏幕但并不被定义为手持设备的设备。

编辑：现在看来你无法百分之百地可靠地检测到触摸屏幕设备，也可以参考这个问题。