table表格 鼠标移入整行背景颜色 字体颜色更改

在HTML和CSS中，你可以通过CSS伪类`:hover`和`:active`来改变表格行在鼠标悬停和点击时的样式。这里是一个简单的示例，展示如何在鼠标悬停时更改背景色和字体颜色：

首先，在HTML中，保持表格结构不变：

<table id="myTable">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <!-- 更多行... -->
</table>

然后在CSS中添加选择器和规则：

#myTable tr:hover { /* 鼠标悬停在行上 */
  background-color: yellow; /* 背景变为黄色 */
  color: blue; /* 文字变为蓝色 */
}

#myTable tr:active { /* 鼠标按下并停留 */
  background-color: lightblue; /* 悬停效果结束后背景变为浅蓝 */
  color: black; /* 文字恢复默认颜色 */
}

这样，当鼠标悬停在表格行上时，背景颜色会变成黄色，文字颜色变蓝；当鼠标按下并保持在行上时，背景变为浅蓝色。

相关问题

antd table鼠标移入整行改变样式

可以通过CSS的:hover伪类来实现鼠标移入整行改变样式的效果。

首先，在table的CSS样式中，添加以下代码：

tr:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

这里我们设置鼠标移入tr元素时，将背景颜色设置为浅灰色，并将鼠标样式设置为手型。

然后，在antd的Table组件中，设置rowClassName属性为一个函数，该函数返回样式类名，代码如下：

<Table
  dataSource={dataSource}
  columns={columns}
  rowClassName={() => 'table-row'}
/>

其中，table-row为我们定义的样式类名，代码如下：

.table-row:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

这里我们设置鼠标移入table-row元素时，将背景颜色设置为浅灰色，并将鼠标样式设置为手型。

这样，当鼠标移入antd的Table组件中的一行时，该行就会改变样式。

table 鼠标滑过整行变色

您可以使用CSS的:hover伪类来实现这个效果。

例如，将表格中每一行的背景颜色设置为白色，然后使用:hover来设置当鼠标悬停在该行上时，背景色变为灰色：

table tr {
  background-color: white;
}

table tr:hover {
  background-color: gray;
}

您可以根据需要自定义颜色和样式。