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

我正在使用tr:odd选择器为table>tr提供奇数颜色，我还需要tr悬停效果，它在正常tr中工作正常，但在tr:odd中不显示该颜色

您将在此处获得代码：

---

提前感谢

您可以使用

！重要信息

：

tr:hover{ background:#ccc !important}

css（）

方法向元素添加样式属性，样式属性中的属性将覆盖其他属性，以避免使用

！重要信息

您可以改用类：

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

---

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

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

脚本

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

CSS

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

---

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

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

相反，您应该使用标准CSS选择器

nth of type

来实现这一点

然后，您可以使用已有的

：hover

选择器轻松覆盖它

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

有了这个CSS，并且删除了JS，您现有的JSFIDLE代码就可以完全按照您的意愿工作

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

你会遇到的唯一问题是旧版本的IE，它不支持类型的第n个，但是有一些黑客可以解决这个问题。（或）

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

---

希望对您有所帮助。

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

---

它已经具有悬停效果，悬停时颜色会发生变化。你到底想要什么？是的，我差点忘了！重要标签：-）是的，现在可以了。感谢you@user1479316-使用

！重要信息

应始终视为最后手段；还有比这更好的解决方案。@user1479316欢迎您使用

！重要提示

不建议使用，或者您可以使用

addClass

来代替。是的，我在类型（2n）的tr:nth之前使用过，但它在IE8中不起作用，客户希望它在IE8中能正常工作，这是我们使用jquery的唯一原因。您是否检查了IE9.js或Selectivzr选项？