当我们使用tr：odd时，如何在tr中给出悬停效果

Question

我正在使用tr：奇数选择器给表＆gt; tr奇怪颜色，我也想要tr悬停效果，它在普通tr中工作正常但是那种颜色不会出现在tr：odd

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

提前致谢

Answer 1

这是因为您通过脚本设置的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}

Demo

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

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

Demo

Answer 4

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

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