表格行突出显示

Question

一直在网上寻找进行表行突出显示的“最佳”方法。

似乎两个主要替代方案是：

1 纯 CSS：tr:hover

2 Css + Jquery：

$("table").delegate('td','mouseover mouseleave', function(e) {
  if (e.type == 'mouseover') {
    $(this).parent().addClass("tr-hover");
  }
  else {
    $(this).parent().removeClass("tr-hover");
  }
});

我不知道现在什么被认为是最佳实践。据我所知，只有 IE7 不能与纯 CSS 选项正常工作。

或者，我应该考虑其他选择吗？

Answer 1

使用 CSS :hover 方法。如果设置了 DOCTYPE，它也适用于 IE7+。此声明得到这篇 MSDN 文章。

...提高 CSS2.1 合规性。所有这些工作（透明 PNG 除外）都是在 仅切换，因为所有更改都需要行为更新以更加符合 CSS 规范指定的内容。

  。 。 。
我们还扩展了现有的实现，以符合 W3C 规范：

• 在所有元素上启用 :hover，而不仅仅是

根据个人测试（以及 此来源），在以下情况下，标准兼容模式未激活：

• 未设置 DOCTYPE
  或者当设置了 DOCTYPE，并且：
• 指定了无版本 HTML。
• 指定低于 4.x 的 HTML 版本（包括不存在的较低版本，例如 3.99）
• 指定 HTML 4（而不是 4.x），但不带 URL。 http://也有效，其他协议无效。
• HTML 4.x 过渡或 HTML 4.x 框架集不 URL 部分。

它可以与所有其他 DOCTYPE 一起激活，包括 XHTML、XML 和未知的 DOCTYPE。

---

CSS 的优点：

• 它比 jQuery 高效得多：不涉及事件侦听器，行为是在 CSS 规则定义之后立即定义的（jQuery 需要库和函数调用）。
• 当 JavaScript 被禁用时它也可以工作。

jQuery 的优点：

• 它也适用于 IE6-
  （这个标记并不是那么重要，所以这不会有很大的权重。顺便问一下，谁在使用 IE6？）。