jquery - 当我们使用 tr:odd 时如何在 tr 中提供悬停效果

Question

我正在使用 tr:odd 选择器给 table>tr 奇数颜色，我也想要 tr 悬停效果，它在正常 tr 中工作正常但该颜色不会出现在 tr:odd

你会在这里得到代码：http: //jsfiddle.net/MygAx/

提前致谢

score 2 · Accepted Answer

这是因为您通过脚本设置的 css 被认为是内联的，其优先级高于外部 css 文件设置的 css。

您可以这样做来解决问题：

脚本

$(document).ready(function(){
  $("tr:odd").addClass("odd")
});

CSS

tr.odd{background-color: #eee}
tr:hover{ background:#ccc}

请记住，css 中的顺序很重要。

score 1 · Accepted Answer

解决方案是不要为此使用 jQuery。

相反，您应该使用标准的 CSS 选择器nth-of-type来实现这一点。

:hover然后，您可以使用已有的选择器轻松覆盖它。

tr:nth-of-type(2n) {background:#eee;}
tr:hover{ background:#ccc}

使用这个 CSS 并移除 JS，您现有的 JSFiddle 代码可以完全按照您的意愿工作。

您甚至可以将它们组合起来，以便奇数行获得与偶数行不同的悬停颜色。

您遇到的唯一问题是旧版本的 IE，它不支持nth-of-type，但是有一些黑客可以解决这个问题。( IE9.js或Selectivizr )

它不适用于 jQuery 版本的原因是，当 jQuery 设置其 CSS 时，浏览器将其视为内联在 HTML 代码中，因此比纯 CSS 代码具有更高的优先级。

希望有帮助。

score 0 · Accepted Answer

看看实际发生了什么首先应用悬停事件并重新分配其他 CSS（它不是第二类所以）元素将被替换为第二个 CSS

score 0 · Accepted Answer

您可以使用!important：

tr:hover{ background:#ccc !important}

css()方法为元素添加样式属性，样式属性中的属性会覆盖其他属性，为了避免使用!important可以使用类来代替：

$(document).ready(function(){
  $("tr:odd").addClass('grey')
});

4 回答 4