css tr 鼠标悬浮变色

CSS是一种用来控制网页样式的语言，通过CSS可以为页面中的元素添加样式，并且可以让网页变得更加美观与易于阅读。本文将介绍如何使用CSS中的tr伪类，实现鼠标悬浮时表格行变色的效果。

首先，在HTML代码中定义一个表格，每一行都添加一个class名用于区分。例如：

table>
    tr class="row-1">
    td>
    Item 1/td>
    td>
    $10/td>
    /tr>
    tr class="row-2">
    td>
    Item 2/td>
    td>
    $20/td>
    /tr>
    tr class="row-1">
    td>
    Item 3/td>
    td>
    $30/td>
    /tr>
    /table>

接下来，在CSS样式表中为表格的tr元素定义两个不同的颜色。例如：

table tr.row-1 {
    background-color: #EEE;
}
table tr.row-2 {
    background-color: #DDD;
}

然后，使用tr:hover伪类来应用鼠标悬浮时的颜色。例如：

table tr:hover {
    background-color: #CCC;
}
    

这样，在鼠标悬浮于表格行上时，该表格行的背景颜色会变成#CCC，从而达到了鼠标悬浮变色的效果。

总的来说，使用CSS tr:hover伪类能够实现鼠标悬浮时表格行变色的效果。这是一个简单而实用的CSS技巧，可以让网页更加美观与易于阅读。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！