如何使用特性检测来判断浏览器是否支持CSS hover？

Question

如何使用特性检测来确定浏览器是否支持:hover伪类？如果可能的话，我想在不使用条件注释来包含ie6特定脚本文件的情况下完成这个操作。

- mhildreth

---

对于特性检测，您需要一些复杂的Javascript，这似乎是一个相当大的依赖项 - 特别是考虑到（据我所知）唯一不支持:hover的浏览器是IE6。 - Pekka

理论上，您可以在 body:hover 上设置样式，然后获取 body 的计算样式并查看是否已设置。我怀疑如果指针位于工具栏上，则会出现问题。话虽如此，如果您正在使用 :hover 来表示除了指示指针所在位置值得单击之外的任何内容，那么您应该考虑使用 JS。:hover 太过限制，并且往往意味着您依赖于人们使用指针设备以及能够保持稳定（例如，关节炎患者难以做到这一点）。 - Quentin

几乎所有主流的现代浏览器都支持:hover伪类。 - heymrcarter

@David - 这是一个好想法，但正如你所指出的那样，如果鼠标在脚本运行时在窗口外部，它将无法工作。 - mhildreth

Answer 1

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

但是，您可以使用jQuery来对任何东西进行悬停更改，这只是其中之一。

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

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

- daveyfaherty

---

我喜欢有人总是提供jQuery解决方案，即使没有被要求。 - mikerobi

我发现这是模拟所有浏览器的悬停支持最干净的方法。而且，我已经用一个可行的解决方案回答了他的问题 ;) - daveyfaherty

这对于那些在非jQuery项目上工作的人来说并不是很有帮助。这绝对不是最干净的解决方法；有一些修复方法可以让:hover在ie6中正常工作。请查看我的更新答案。 - mikerobi

我明白你的想法。我使用所展示的解决方案的原因是它是跨平台的，而且我发现当代码尽可能标准化时，更容易维护。我认为JavaScript库就是这样，而不是一个单独的范例。我承认，如果你已经加载了其他库，你可能不想再加入jQuery。 - daveyfaherty

@puppybard - 好建议。但是，我们已经在使用jquery，所以这不是问题。然而，我们必须将悬停事件连接到页面上的大量元素（如400个以上）。在jquery 1.4.3+中使用jquery来完成此操作需要几乎一秒钟的时间。在旧版本的jquery中，速度明显更快（并且在可接受范围内）。我想做的是包含悬停的css规则，然后仅在浏览器不支持:hover并且绕过整个问题时运行jquery连接（正如您建议的那样）。 - mhildreth

Answer 2

如果浏览器是 ie6 或更旧版本，则不支持 hover。任何其他不支持 hover 的浏览器都太旧或太冷门，不值得担心。

编辑：在 ie 6 中可以让 :hover 生效：点此查看。

- mikerobi

---

谢谢 - 这正是我不想要的答案类型。 - mhildreth

最近每个人都在强调特征检测而非浏览器检测，因此我正在尽职尽责地尝试采用这种方法。但是，看起来我可能只能检查IE6并且进行jQuery绑定。 - mhildreth

@Mark Hildreth，通常情况下特征检测更好，但有些特征非常难以或不可能检测到。例如：我相当确定ie6 png透明度错误是无法检测到的。 - mikerobi