最直接的方式是给tr元素设置tr:hover { font-weight: bold; }，需确保td/th未用更高优先级样式覆盖，推荐配合tbody tr:hover限定范围并设td, th { font-weight: inherit; }以保障继承生效。

用 CSS 的 :hover 选择器直接作用于 <tr><p>表格行悬停加粗最直接的方式，是给 <code><tr> 元素绑定 <code>:hover 状态，并设置 font-weight: bold。注意：必须确保单元格内的文字没有被更具体的样式（比如 <td> 上的 <code>font-weight: normal）强行覆盖。

常见错误现象：<tr> 加了 <code>:hover 但没反应——大概率是 CSS 优先级不够，或 <td>/<code><th> 单独设了不可继承的字体粗细。 <ul> <li>推荐写法：<code>tr:hover { font-weight: bold; }，不依赖 JavaScript

如果表格用了 border-collapse: collapse，不影响该效果

兼容性极好，所有现代浏览器及 IE9+ 均支持

为什么不能只写 td:hover？

单独给 <td> 写 <code>:hover 只会让鼠标悬停的那个单元格加粗，不是整行。用户要的是“整行响应”，所以目标必须是包裹所有单元格的 <tr>。 <p>使用场景：数据表格、后台列表、成绩表等需要快速定位行的界面。</p> <ul> <li>若需高亮整行（背景色 + 加粗），可同时设 <code>background-color，但注意可访问性（颜色对比度）

避免对 <th> 行（表头）也应用该规则，除非有意为之；可用 <code>tbody tr:hover 精确限定范围

遇到内联样式或框架样式冲突怎么办？

某些 UI 框架（如 Bootstrap）或组件库会给 <td> 设置 <code>font-weight: 400 或 !important，导致 tr:hover 失效。

解决思路是提高选择器权重或强制继承：

• 改用 tbody tr:hover td, tbody tr:hover th { font-weight: bold !important; }
• 或者让文字继承父级粗细：tr:hover { font-weight: bold; } td, th { font-weight: inherit; }
• 检查开发者工具中「Computed」面板，确认最终生效的 font-weight 值和来源

移动端是否有效？

在纯触屏设备（无鼠标）上，:hover 行为不可靠——iOS Safari 和 Android Chrome 对 :hover 的触发有延迟或仅在模拟鼠标时短暂生效。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

如果需要兼顾触摸设备，得额外考虑交互反馈方式：

• 不要依赖悬停作为唯一操作提示，搭配点击态（如 :active）或图标变化
• 部分安卓浏览器在首次点击后会“激活” hover，但行为不一致，不宜作为主要逻辑
• 真正需要跨端一致的高亮，建议用 JS 监听 touchstart + touchend 切换 class

整行加粗看着简单，但实际常卡在样式继承链和设备差异上。动手前先打开 DevTools 看一眼 computed style，比猜半天快得多。

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