如何在tr中给予悬停效果当我们使用tr时：奇数

我正在使用tr：奇数选择器给出tr>奇数颜色，我也希望tr悬停效果，它在正常tr中工作正常，但不会出现该颜色在TR：奇如何在tr中给予悬停效果当我们使用tr时：奇数

在此先感谢

2012-08-06 The AV

它已经有悬停效果和颜色的变化上取代徘徊。你想要的究竟是什么？ – Prateek 2012-08-06 05:56:34

您可以使用!important：

tr:hover{ background:#ccc !important}

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

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

2012-08-06 05:56:49 undefined

是的，我几乎忘记了！重要的标签.. :-)是的它的工作现在很好。谢谢 – 2012-08-06 06:04:22

@ user1479316 - 使用'！important'应该总是被认为是最后的手段;有比这更好的解决方案。 – Spudley 2012-08-06 06:08:26

@ user1479316欢迎您使用'！important'不推荐，或者您可以使用'addClass'代替。 – undefined 2012-08-06 06:08:41

这是因为你正在通过脚本设置的CSS被认为是内联，它比外部CSS文件设置的优先级更高。

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

脚本

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

CSS

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

记住，在CSS的顺序很重要。

2012-08-06 05:57:33 Mohayemin

解决方案是不使用jQuery。

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

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

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

有了这个CSS，并且在JS被移除的情况下，您现有的JSFiddle代码完全按照您的需要工作。

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

你唯一会遇到的问题是旧版本的IE，它不支持nth-of-type，但是有黑客可以解决这个问题。（或Selectivizr）

它没有与jQuery版本一起工作的原因是，当jQuery设置其CSS时，浏览器将其视为内嵌在HTML代码中，因此比普通CSS代码具有更高的优先级。

希望有所帮助。

2012-08-06 06:02:56 Spudley

是的，我在tr之前使用过：n型（2n），但它在IE8中不起作用，并且客户端希望它能在IE8中正常工作，这是我们使用jQuery的唯一原因。 – 2012-08-06 06:09:44

你检查过IE9.js或Selectivzr选项吗？ – Spudley 2012-08-06 06:17:10

实际看到的第一个应用悬停事件发生什么事，你重新分配其它CSS（其并不第二课堂）元素将与第二CSS

2012-08-06 06:14:13

回答