:hover 可靠实现需三要素：正确选择器（如.data-table tr:hover）、显式初始背景色+精准transition、移动端用@media降级或JS模拟；table/tr:hover失效主因是选择器错误、背景未声明、display/冒泡干扰。
直接用 :hover 就能实现，但多数人写不对、效果不稳、移动端失效——核心问题不在“会不会”，而在“怎么写才可靠”。
table 或 tr 上的 :hover 为什么没反应？
常见错误是选择器写空或层级错。比如只写 :hover { background-color: #eee; }，浏览器直接忽略；或者写了 tr:hover 却忘了 tr 默认没有背景（background-color 继承自父级，而 table 可能没设）。
- 必须带具体选择器：
.data-table tr:hover或#myTable tbody tr:hover -
tr要有可渲染背景：确保它不是空行，且至少有一个td或th存在；否则鼠标悬停区域为 0，根本触发不了 - 别依赖
table:hover控制整表变色——它只在鼠标进入 table 边框内才生效，用户更常想的是“进某一行才变”
为什么 hover 变色看起来卡顿或闪烁？
根本原因是没加 transition，或加得不精准。瞬时切换会让视觉跳变，尤其在快速扫过行时。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 只过渡背景色：
transition: background-color 0.2s ease;，别写transition: all 0.2s;——可能意外带动border、padding导致重排 - 初始状态必须显式声明：
tr { background-color: #fff; }，否则从“未定义”开始过渡，行为不可控 - 如果用了半透明色（如
rgba(0,0,0,0.05)），记得初始也写background-color: transparent或对应色值，否则过渡起点错乱
移动端 hover 基本不可靠，怎么兼容？
iOS Safari 和多数安卓浏览器里，:hover 只在模拟指针（比如外接触控板）时有效；真机触摸通常只触发一次，且延迟高、体验差。
立即学习“前端免费学习笔记（深入）”；
- 别用
:hover实现关键功能（比如展开菜单、显示操作按钮） - 可用媒体查询做降级：
@media (hover: hover) and (pointer: fine) { .row:hover { background-color: #f0f9ff; } }，仅对精确指针设备启用 - 真正要跨端一致，得用 JS：监听
touchstart加 class，touchend移除，再用该 class 控制背景色——但注意防重复触发和长按误判
最易被忽略的其实是 display 类型和事件冒泡范围：inline 元素套 table 行会截断 hover 区域，而没给 tbody 显式设样式时，tr:hover 可能被父级背景盖住。调不好这三点，配色再准也没用。
