CSS 实现鼠标放在上面时整行变色效果

要实现鼠标放在整行时改变行的颜色的效果，可以使用CSS的:hover伪类选择器。具体步骤如下：

1. 首先给每一行（即每个 <tr> 标签）添加一个类名，例如：.row。

2. 在CSS样式表中将 .row 类的背景色（或者其他样式）设置为默认颜色：

.row {
  background-color: #fff;
}

1. 使用:hover伪类选择器，当鼠标放在某一行时改变该行的样式：

.row:hover {
  background-color: #f2f2f2;
}

这里的 #f2f2f2 可以根据需要设置为其他颜色，表示鼠标放在该行时要改变的颜色。

示例1：

<table>
  <tr class="row">
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
  <tr class="row">
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
  <tr class="row">
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
</table>

.row {
  background-color: #fff;
}

.row:hover {
  background-color: #f2f2f2;
}

示例2：

<ul>
  <li class="row">1. 选项一</li>
  <li class="row">2. 选项二</li>
  <li class="row">3. 选项三</li>
</ul>

.row {
  padding: 10px;
  background-color: #fff;
}

.row:hover {
  background-color: #f2f2f2;
}

在以上两个示例中，每行都添加了 .row 类名，并在CSS样式表中对该类名进行设置。当鼠标放在相应行时，该行背景色会发生变化，达到整行变色的效果。