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

Question

我使用tr:odd选择器给表格>tr赋予奇数颜色，我还想要tr悬停效果，它在正常tr中工作良好，但该颜色不会出现在tr:odrd 中

您将在此处获得代码：http://jsfiddle.net/MygAx/

提前感谢

Answer 1

这是因为您通过脚本设置的css被认为是内联的，它比外部css文件设置的css具有更高的优先级。

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

脚本

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

CSS

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

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

Answer 2

解决方案是不使用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代码具有更高的优先级。

希望能有所帮助。

Answer 3

您可以使用!important:

tr:hover{ background:#ccc !important}

演示

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

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

演示

Answer 4

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

http://jsfiddle.net/MygAx/7/