直接用 td:hover { font-size: 1.3em; line-height: 1.2; transition: font-size 0.2s ease; } 即可，优先使用 em/rem/% 单位，配合 line-height 和 overflow 控制溢出，避免 js 干预。
用CSS :hover 直接改 font-size 最简单
直接给 <td> 或 <code><th> 加 <code>:hover 伪类，改 font-size 就行，不需要 JS。注意字号单位别用 px —— 固定像素在缩放或响应式场景下会失灵，优先用 em、rem 或 %。
常见错误：写成 td:hover { font-size: 18px; }，结果鼠标移入后文字突兀变大，还可能撑破单元格。正确做法是预留空间或配合 overflow: hidden 或 white-space: nowrap 控制溢出。
-
font-size改变会触发布局重排（reflow），如果表格列宽是auto，字号变大可能导致列宽跳变 - 若想平滑过渡，加
transition: font-size 0.2s ease，但避免对整个table设置，只作用于td, th - 移动端 hover 不可靠，真要兼容触摸设备，得额外用 JS 绑定
touchstart模拟，但通常不建议为字号做这事
为什么不能只靠 JavaScript 动态改 style.fontSize
能用纯 CSS 实现的交互，就别绕一圈 JS。手动监听 mouseover/mouseout 去改 style.fontSize，不仅代码冗余，还会覆盖内联样式、破坏 CSS 优先级，且无法利用浏览器原生的伪类缓存优化。
典型翻车点：td.addEventListener('mouseover', e => e.target.style.fontSize = '1.4em') —— 这样写会让后续 CSS 的 font-size 声明失效，除非你同步清理 style.fontSize，否则移出后字号回不去。
- 必须配对处理
mouseout并重置为''（空字符串），否则内联样式残留 - 如果表格有 class 控制基础字号（比如
.small-text），JS 直接写style.fontSize会盖掉它，维护性差 - 大量单元格绑定事件，性能不如 CSS 的委托或原生伪类
表格里字号变化影响对齐？试试 line-height 和 vertical-align
字号变大后，文字上下位置容易偏移，尤其在 vertical-align: middle 的单元格里。单纯调 font-size 不够，得同步控制行高和对齐方式。
推荐组合：td:hover { font-size: 1.3em; line-height: 1.2; }。注意 line-height 用无单位数值（如 1.2），它会随字号缩放，比写 24px 更稳。
- 避免用
padding补偿字号变化 —— 容易导致 hover 前后单元格高度不一致 - 如果用了
display: flex居中，hover 时记得也调整align-items或子元素margin，否则文字会“上浮” - 合并单元格（
rowspan/colspan）hover 时，相邻单元格不受影响，但视觉上可能显得不协调，需统一设计规则
IE 里 hover 失效？检查 DOCTYPE 和触发元素
IE6–8 只支持 a 标签的 :hover，但现代 IE（9+）和所有主流浏览器都支持任意元素。如果你在旧项目里发现 td:hover 不生效，大概率是文档没声明 ，导致 IE 进入怪异模式（Quirks Mode）。
另一个隐蔽坑：<table> 父容器设置了 <code>overflow: hidden，而 hover 放大后的文字超出单元格又没设 overflow: visible，看起来像“没变大”，其实是被裁掉了。
- 用开发者工具检查 computed styles，确认
font-size确实被应用，且没被更高优先级的 CSS 覆盖 - 某些 CSS 重置库（如 normalize.css）会强制
td的font-size: inherit，此时 hover 规则必须更具体，比如写成table td:hover - 不要用
!important解决优先级问题——它会让后续调试和主题切换变得困难
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
