答案：通过CSS的:hover伪类可实现表格悬停效果，如改变背景色、文字样式、添加过渡和阴影等，提升交互体验；移动端可用JavaScript模拟点击高亮。
CSS表格悬停效果，简单来说，就是当你的鼠标移到表格的某一行或者某个单元格上时，它的样式会发生改变，比如背景颜色变深，文字加粗等等。这能给用户更清晰的视觉反馈，知道他们当前选中的是哪一行数据。
实现CSS表格悬停效果，核心就是利用CSS的
:hover伪类选择器。
/* 针对表格行的悬停效果 */
tr:hover {
background-color: #f2f2f2; /* 鼠标悬停时的背景颜色 */
cursor: pointer; /* 鼠标悬停时变为手型，提示用户可点击 */
}
/* 针对表格单元格的悬停效果 */
td:hover {
background-color: #ddd; /* 鼠标悬停时的背景颜色 */
}
/* 如果只想让当前行被选中的单元格高亮 */
tr:hover > td {
background-color: #ddd; /* 鼠标悬停时的背景颜色 */
}
/* 也可以更复杂一些，比如加上过渡效果 */
tr {
transition: background-color 0.3s ease; /* 平滑过渡效果 */
}
tr:hover {
background-color: #e0e0e0;
}
/* 甚至可以针对特定列添加悬停效果，比如第一列 */
td:nth-child(1):hover {
background-color: lightblue;
}如何让表格悬停效果更加美观和实用？
首先，颜色选择很重要。悬停的颜色不要太突兀，最好是和表格本身的颜色搭配协调，比如使用更深的同色系颜色，或者稍微明亮一些的颜色，总之要让用户觉得舒服。
立即学习“前端免费学习笔记（深入）”；
其次，可以考虑加上过渡效果。
transition属性可以让颜色变化更平滑，避免生硬的切换，提升用户体验。
再者，如果表格数据量很大，可以考虑只高亮当前行，而不是整个表格。这样可以减少视觉干扰，让用户更专注于当前行的数据。
最后，别忘了
cursor: pointer;。如果表格行或者单元格可以点击，一定要加上这个属性，让鼠标悬停时变成手型，提示用户可以进行交互。
表格悬停效果在移动端怎么实现？
移动端没有鼠标悬停事件，所以
:hover伪类就没用了。不过，可以考虑用JavaScript来模拟悬停效果。
一种方法是，在用户点击表格行或者单元格时，给它添加一个
active类，然后用CSS来定义
active类的样式。当用户点击其他地方时，再移除
active类。
const tableRows = document.querySelectorAll('tr');
tableRows.forEach(row => {
row.addEventListener('click', () => {
// 移除所有行的active类
tableRows.forEach(r => r.classList.remove('active'));
// 给当前行添加active类
row.classList.add('active');
});
});tr.active {
background-color: #f2f2f2;
}另一种更简单的方法是，直接使用
touchstart事件，在触摸开始时添加
active类，触摸结束时移除
active类。
const tableRows = document.querySelectorAll('tr');
tableRows.forEach(row => {
row.addEventListener('touchstart', () => {
row.classList.add('active');
});
row.addEventListener('touchend', () => {
row.classList.remove('active');
});
});除了改变背景颜色，表格悬停效果还能实现哪些样式变化？
除了背景颜色，还可以改变文字颜色、字体大小、边框样式、阴影等等。甚至可以利用CSS3的
transform属性，让表格行或者单元格在悬停时稍微放大或者旋转。
比如，可以给表格行添加一个轻微的阴影效果：
tr:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}或者，可以改变文字的颜色和字体粗细：
tr:hover td {
color: #333;
font-weight: bold;
}还可以让表格行稍微向上移动一点：
tr:hover {
transform: translateY(-2px);
}总之，只要你能想到的CSS样式，都可以应用到表格悬停效果上。关键是要保持克制，不要过度设计，以免影响用户体验。
