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