Javascript CSS：在移动设备或其他设备上悬停作为切换

我正在做一个简单的

：悬停
滑入封面，如图所示，它应该滑入“favorite article”控件，然后用户可以单击该控件来喜爱该项目

虽然它在桌面上使用鼠标悬停并单击可以很好地工作，但我不确定它是否可以用作移动设备或其他设备上的有效控件（即，单击以切换，然后再次单击以选择喜爱的项目）

如果我理解正确的话，至少在iOS（Safari）和Android（Chrome）上，默认的浏览器行为是在
悬停
和
单击时模拟触摸。但这是一个标准吗？例如


Windows Phone或Wii U也会这样做吗
在
悬停
大约300毫秒后，
点击
是否会被触发，因此可能会出现重影点击问题

我当然可以在这个元素上绑定一个click/touch事件，只是想知道现在css
：hover
是否足够

澄清一下：我不是在问
：hover
支持，它只在指针驱动的环境中才有意义。我在问，当用户点击/点击时，设备是否能够也应该处理悬停元素（就像iOS/Android一样）

目前还没有一款手机能够很好地支持：悬停状态


我还没有在手机上使用Modernzr.js，但它说它可以检测浏览器是否支持触摸事件，所以如果用户使用移动设备，它基本上会在html标记中添加“.touch”类

所以你会像这样使用它，例如

.touch a:active{ /*css code here */ }

希望这会有所帮助
在使用鼠标和键盘浏览网页时，将光标悬停在网页元素上是一种常见的操作，但在基于触摸的浏览中，没有类似的操作。本主题演示如何使用
aria haspoop
Document Object Model（DOM）属性在Windows 8上使用Internet Explorer 10在支持触摸的设备上模拟悬停

此行为不适用于Windows 7上的Internet Explorer 10（不支持使用aria haspopup进行悬停模拟）或Windows 8.1上的Internet Explorer 11（具有内置的触摸悬停支持）

在触摸场景中，在触摸元素时将鼠标悬停应用于该元素。但是，点击元素也可以激活元素，例如导航链接。实际上，点击是一个动作中的悬停和激活。这使得触摸用户无法访问隐藏在鼠标悬停后的交互式内容。交互模型完全不同，将光标悬停在页面元素上没有触摸模拟

最好的做法是不要使用悬停来隐藏用户可以隐藏的内容
与……互动。相反，请考虑使用OnCutter事件来切换
能见度

说到手机，我怀疑是否有任何标准。是的，触摸设备在被触摸时应用悬停状态是很常见的，但您永远无法判断用户是否使用了可能会以不同方式解释悬停状态的任意数量的浏览器

我想说，你最好的选择是争取最低的公分母，并假设每个触摸设备只能对触摸动作做出响应

当然，答案是编写媒体查询和/或javascript来强制浏览器按您希望的方式操作

这只是我的个人哲学，因为它的价值。
你的问题并不完全清楚，我无法理解你是在问“我可以在所有设备上使用
：hover
”还是“将
：hover
在所有设备上都表现相同？”或者“是
：hover
在web上是标准元素吗？”

此外，如果您考虑到当前使用最多的设备，或者您也考虑到了不太熟悉和使用的设备，那么这在很大程度上取决于您对“所有设备”的概念

我将引用以下内容，但我相信你已经读过了：

交互式用户代理有时会更改渲染以响应
用户操作。CSS为常见情况提供了三个伪类：

：hover伪类在用户指定元素时应用
（使用一些定点设备），但不激活它。例如，一个
当光标（鼠标）移动时，可视用户代理可以应用此伪类
指针）悬停在元素生成的框上用户代理不可用
支持交互式媒体不必支持这个伪类。
某些支持交互媒体的一致性用户代理可能不可用
能够支持此伪类（例如，笔设备）。活动：活动
伪类在用户激活元素时应用。
例如，在用户按下鼠标按钮和
释放它

CSS没有定义哪些元素可能处于上述状态，或者如何处于上述状态
状态被输入和离开。脚本可能会更改元素是否
无论是否对用户事件做出反应，不同的设备和UAs可能会
指向或激活元素的不同方式

5.11.3动态伪类：：hover、：active和：focus

正如您在W3C规范中看到的，它声称非交互式媒体用户代理以及一些交互式媒体用户代理不需要
：hover
伪类。
因此，可以安全地假设
：并非始终支持悬停

要深入了解这一问题，请阅读以下Safari Mobile规范：

此外，iOS上的Safari用户可以与您的web内容交互
直接用手指，而不是用鼠标这将创建
触摸式界面的新机会，但效果不佳
具有悬停状态。例如，鼠标指针可以悬停在
网页元素并触发事件；多点触摸屏上的手指
不能。对于