当鼠标悬停在 HTML 中的表格上时如何更改文本颜色

在 HTML 中，我们可以使用CSS来控制元素的样式，包括文本颜色。当鼠标悬停在表格上时，我们可以通过添加一个伪类:hover来实现更改文本颜色的效果。

实现步骤

1. 首先，需要在表格的CSS代码中添加一个:hover伪类，以响应鼠标悬停事件：

table:hover {
  /* 添加需要更改的样式 */
}

2. 在:hover伪类中添加需要更改的样式，比如改变文本颜色：

table:hover {
  color: red;
}

这样，当鼠标悬停在表格上时，表格内的文本颜色就会变成红色。

示例代码

以下是一个简单的HTML表格和相应的CSS样式代码，当鼠标悬停在表格上时，表格内的文本颜色将变成红色。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 5px;
}
table:hover {
  color: red;
}

总结

在HTML中，我们可以使用CSS来控制元素的样式。通过添加:hover伪类，我们可以实现当鼠标悬停在表格上时更改文本颜色的效果。需要注意的是，:hover伪类只在支持CSS的浏览器中生效。