css tr 行放上面 变色

CSS是前端开发中常见的样式语言之一，它可以使我们对网页进行高效的排版和美化。其中，对表格中的每一行进行颜色变换是非常实用的操作。那么该怎样实现这种效果呢？

/*样式表*/
tr:hover{
  background-color: #E2F2FF;
}

以上代码中，tr:hover表示当鼠标停留在该表格行上时，background-color属性会将该行的背景颜色变为#E2F2FF，从而实现了行放上面变色的效果。

如果需要让多个表格行颜色交替，我们也可以使用CSS选择器中的:nth-child()伪类。

/*样式表*/
tr:nth-child(odd){
  background-color: #F2F2F2;
}
tr:nth-child(even){
  background-color: #FFFFFF;
}
tr:hover{
  background-color: #E2F2FF;
}

以上代码中，我们使用了:nth-child()伪类来对奇偶行分别设置颜色。当鼠标停留在表格上时，会优先执行:hover规则，覆盖奇偶行的颜色。

在实际应用中，我们可以根据自己的需求来调整CSS样式，达到最佳的视觉效果。