:hover 配合 box-shadow 实现行悬停阴影需作用于 <td>/<th> 并设 position: relative，避免直接用于 <tr>；注意 overflow 裁剪、IE 兼容性及触摸设备 hover 不可靠问题。
用 :hover 配合 box-shadow 实现行悬停阴影
直接给 <tr> 加 :hover 和 box-shadow 是无效的——<tr> 默认是表格内部渲染模型，不支持 box-shadow。必须把阴影加在能渲染盒模型的元素上，最稳妥的是给 <td> 或 <th> 设样式，并统一控制整行视觉效果。
实操建议：
- 给
<tbody><tr>下所有<td>和<th>设置position: relative，再用:hover触发子元素阴影（或直接给<td>加box-shadow） - 为避免每列阴影叠加导致过重，推荐用
box-shadow: 0 2px 6px rgba(0,0,0,0.1)这类轻量值 - 若表格有
border-collapse: collapse，阴影可能被裁剪，此时需给<table>加overflow: hidden或改用border-collapse: separate
兼容性问题：IE 不支持 box-shadow 在表格单元格上生效
IE9+ 支持 box-shadow，但旧版 IE 对 <td> 渲染限制多，常出现阴影不显示或错位。真实项目中若需兼容 IE10 及以下，不能依赖纯 CSS 方案。
替代做法：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 监听
mouseenter/mouseleave，动态给整行加 class，再用背景色 + 边框模拟“阴影感” - 避免用
filter: drop-shadow()——它在 IE 中表现不稳定，且对<tr>依然无效 - 如果必须用 CSS 且只支持现代浏览器，确认目标环境最低为 Chrome 50 / Firefox 45 / Edge 12
阴影遮挡内容或影响布局？检查 z-index 和 overflow
box-shadow 默认不占文档流，但若父容器设置了 overflow: hidden（比如表格外层有滚动容器），阴影会被裁掉。
排查和修复步骤：
- 给
<td>加z-index: 1（需同时设position: relative） - 确保
<table>或其最近的带overflow的祖先没有裁剪行为 - 阴影若导致文字模糊，说明
blur-radius过大（如超过8px），建议控制在2px–6px范围内
移动端触摸设备上 :hover 行为不可靠
iOS Safari 和部分安卓浏览器在无鼠标设备上，:hover 只在点击后短暂触发，甚至完全不响应。这不是 bug，而是规范行为。
应对方式：
- 不要单独依赖
:hover做关键交互反馈；可搭配:active或 JavaScript 的touchstart做降级 - 若仅用于视觉增强，可加媒体查询：
@media (hover: hover) and (pointer: fine) { ... }，把阴影逻辑限定在真有悬停能力的设备上 - 测试时务必在真机上点按验证，模拟器的 hover 模拟往往不准
position: relative、忽略 overflow: hidden 裁剪、或没考虑触摸设备的交互差异，这三处最容易让效果消失。 
