如何使用特征检测来了解浏览器是否支持 CSS 悬停？答案

【问题标题】：How to use feature detection to know if browser supports css hover?如何使用特征检测来了解浏览器是否支持 CSS 悬停？
【发布时间】：2011-06-24 07:18:16
【问题描述】：

如何使用特征检测来确定浏览器是否支持 :hover 伪类？如果可能的话，我想不使用条件 cmets 来包含特定于 ie6 的脚本文件。

【问题讨论】：

对于特征检测，您需要一些复杂的 Javascript，这似乎是一个很大的依赖项——尤其是作为唯一不支持 (AFAIK) 的浏览器不支持 :hover 确实是 IE6跨度>
理论上，您可以在body:hover 上设置样式，然后获取正文的计算样式并查看是否已设置。我怀疑如果指针在工具栏上，那会中断。也就是说，如果您使用:hover 来表示值得单击指针所在的点，那么您可能无论如何都应该查看JS。 :hover 太局限了，往往意味着你依赖于使用指点设备的人，以及能否保持稳定（例如关节炎）。
几乎所有主流的现代浏览器都支持 :hover 伪类
@David - 这是一个好主意，但正如你所指出的，如果脚本运行时鼠标在窗口外，它将不起作用

【解决方案1】：

如果是ie6以上，不支持hover。任何其他不支持悬停的浏览器都太旧且晦涩难懂。

编辑

可以使:hover在ie 6中工作：See here

【讨论】：

【解决方案2】：

符合标准的浏览器支持 :hover 伪类。像 IE6 这样的浏览器只支持 <a> 元素。

但是，您可以使用 jQuery 对任何事物进行悬停更改，仅举一个例子。

$('.class').hover(
    function(){
        $(this).addClass('hover');
    },
    function(){
        $(this).removeClass('hover');
});

在你的 CSS 中，使用 .hover 类代替伪类 :hover

【讨论】：

我喜欢有人总是提供 jQuery 解决方案，即使没有人要求。
我发现这是为所有浏览器模拟悬停支持的最简洁的方法。我实际上已经用一个可行的解决方案回答了他的问题；）
这对于从事非 jquery 项目的人来说不是很有帮助。这绝对不是最干净的解决方法；有一些修复程序实际上使:hover 在ie6 中工作。请参阅我的更新答案。
我知道你来自哪里。我使用我展示的解决方案的原因是它与平台无关，而且我发现代码尽可能标准时更易于维护。我认为 javascript 库正是如此，而不是一个单独的范例。我承认，如果您已经在加载其他库，您可能不想再使用 jQuery。
@puppybard - 好建议。但是，我们已经在使用 jquery，所以这不是问题。但是，我们必须将悬停事件连接到页面上的大量（如 400 多个）元素。在 jquery 1.4.3+ 中使用 jquery 执行此操作几乎需要一整秒。在旧版本的 jquery 中它明显更快（并且在可接受的范围内）。我想做的是包含悬停的css规则，然后如果浏览器不支持：悬停并回避整个问题，则仅运行jquery连线（如您所建议的）。