:hover 配合 box-shadow 实现行悬停阴影需作用于 / 并设 position: relative，避免直接用于 ；注意 overflow 裁剪、IE 兼容性及触摸设备 hover 不可靠问题。

用 :hover 配合 box-shadow 实现行悬停阴影

直接给 加 :hover 和 box-shadow 是无效的—— 默认是表格内部渲染模型，不支持 box-shadow。必须把阴影加在能渲染盒模型的元素上，最稳妥的是给 或 设样式，并统一控制整行视觉效果。

实操建议：

• 给 下所有 和 设置 position: relative，再用 :hover 触发子元素阴影（或直接给 加 box-shadow）
• 为避免每列阴影叠加导致过重，推荐用 box-shadow: 0 2px 6px rgba(0,0,0,0.1) 这类轻量值
• 若表格有 border-collapse: collapse，阴影可能被裁剪，此时需给 加 overflow: hidden 或改用 border-collapse: separate

  兼容性问题：IE 不支持 box-shadow 在表格单元格上生效

  IE9+ 支持 box-shadow，但旧版 IE 对

  依然无效
  如果必须用 CSS 且只支持现代浏览器，确认目标环境最低为 Chrome 50 / Firefox 45 / Edge 12

  阴影遮挡内容或影响布局？检查 z-index 和 overflow

  box-shadow 默认不占文档流，但若父容器设置了 overflow: hidden（比如表格外层有滚动容器），阴影会被裁掉。

  排查和修复步骤：

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
  • 给
  渲染限制多，常出现阴影不显示或错位。真实项目中若需兼容 IE10 及以下，不能依赖纯 CSS 方案。

  替代做法：

  • 用 JavaScript 监听 mouseenter/mouseleave，动态给整行加 class，再用背景色 + 边框模拟“阴影感”
  • 避免用 filter: drop-shadow()——它在 IE 中表现不稳定，且对
  加 z-index: 1（需同时设 position: relative）

  确保 或其最近的带 overflow 的祖先没有裁剪行为

  阴影若导致文字模糊，说明 blur-radius 过大（如超过 8px），建议控制在 2px–6px 范围内

  移动端触摸设备上 :hover 行为不可靠

  iOS Safari 和部分安卓浏览器在无鼠标设备上，:hover 只在点击后短暂触发，甚至完全不响应。这不是 bug，而是规范行为。

  应对方式：

  • 不要单独依赖 :hover 做关键交互反馈；可搭配 :active 或 JavaScript 的 touchstart 做降级
  • 若仅用于视觉增强，可加媒体查询：@media (hover: hover) and (pointer: fine) { ... }，把阴影逻辑限定在真有悬停能力的设备上
  • 测试时务必在真机上点按验证，模拟器的 hover 模拟往往不准

  真正起作用的从来不是“给 tr 加 shadow”，而是理解表格渲染模型和阴影生效条件。漏掉 position: relative、忽略 overflow: hidden 裁剪、或没考虑触摸设备的交互差异，这三处最容易让效果消失。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！