jquery - 表格行突出显示

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+。此声明由 this MSDN article 支持.

... improve CSS2.1 compliance. All this work (with the exception of transparent PNGs) has been done under the <!DOCTYPE> switch only, since all changes required behavioral updates to be more in line what the CSS spec specifies.
  . . .
We also extended our existing implementations to comply with W3C specifications:

• Enable :hover on all elements not just on <a>

根据个人测试(以及 this source)，符合标准的模式在以下情况下不会激活:

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

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

<小时/>

CSS 的优点:

• 它比 jQuery 高效得多:不涉及事件监听器，行为是在 CSS 规则定义之后定义的(jQuery 需要库和函数调用)。
• 当 JavaScript 被禁用时它也能工作。

jQuery 的优点:

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