HTML中tr标签如何实现悬浮高亮效果-html教程-PHP中文网

tbody tr:hover 才是真正生效的选择器，因浏览器自动补的 tbody 不被 css 匹配；需显式写，且 hover 样式必须作用于 td/th 而非 tr 本身，并兼顾移动端限制与深色主题适配。

html中tr标签如何实现悬浮高亮效果

直接给 tr 加 :hover 是最简路径，但 90% 的“没反应”不是写错了，而是被结构、样式或设备限制拦住了。

tbody tr:hover 才是真正生效的选择器

浏览器自动补的 tbody 不等于 CSS 能匹配它。如果 HTML 里没显式写 <tbody>，<code>tbody tr:hover 就完全不生效。

错误写法：<table><tr><td>data</td></tr></table> —— tr 是 table 的直接子元素，不是 tbody 的
正确写法：<table><tbody><tr><td>data</td></tr></tbody></table>
Vue/React 中别用 <fragment></fragment> 或空标签包裹 tr，必须显式套 <tbody> <li>Bootstrap 用户注意：<code>.table-hover 的规则是 .table-hover > tbody > tr:hover，漏掉任意一层都会失效

tr:hover 背景色为什么看不见

tr 本身不渲染背景，真正画色的是 td 和 th。它们默认有独立背景（通常是透明或白色），会盖住 tr:hover 的设置。

别只写 tr:hover { background: #f5f5f5; } —— 这行代码几乎总是无效
必须写成：tbody tr:hover td, tbody tr:hover th { background: #f5f5f5; }
确保 td, th 没有 background: white !important 这类强覆盖规则
Safari 对 background-color: inherit 支持较严格，不设这句容易全黑或全白

移动端 hover 效果不可靠，得兜底

iOS Safari 和 Android Chrome 在非链接元素上基本不触发 :hover，这不是 bug，是浏览器主动限制。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

别用 tr:hover 做关键反馈（比如悬停才显示删除按钮）
用媒体查询启用： @media (hover: hover) { tbody tr:hover td { background: #f5f5f5; } }
真要支持触摸设备，监听 touchstart 给当前 tr 加临时 class，touchend 后 150ms 移除，避免误触残留
iPad 上首次点击某行后，该行会“卡住”高亮状态，直到点别处——这是 Safari 的 hover 模拟机制，纯 CSS 无法解决

边框、过渡和深色主题下的细节坑

加了 border-collapse: collapse 后，tr:hover 只改背景不碰边框，视觉上容易割裂；过渡写错还会引发重排卡顿。

边框颜色必须作用在 td/th 上：tbody tr:hover td { border-color: #e0e0e0; }，前提是这些单元格本身定义了 border
过渡只写安全属性：tbody tr { transition: background-color 0.2s ease; }，千万别用 transition: all
深色主题下，别用纯白 #ffffff 做 hover 色，推荐 rgba(255, 255, 255, 0.06) 或低饱和度灰如 #2d3748
如果表格用了 box-shadow 模拟分隔线，hover 时别同时改 shadow 和 background，叠加动画易糊