display不可过渡，因无数值关系无法插值，浏览器直接丢弃规则；应改用opacity与visibility协同控制，并将transition声明在常态选择器中。
直接用 :hover 配合 transition 就能实现，但多数人卡在“写了没反应”——根本原因不是语法错，而是过渡属性选错了、初始值无效，或触发时机不对。
为什么 display: none 悬停后加 transition 完全没动画
因为 display 是不可过渡的 CSS 属性。浏览器不计算它的中间状态，display: none → block 是瞬间切换，transition 彻底失效。
- 正确替代方案：用
opacity控制显隐，再配合visibility: hidden/visible解决点击穿透问题 - 初始状态必须是
opacity: 0; visibility: hidden;，悬停时设为opacity: 1; visibility: visible; - 只写
transition: opacity 0.3s;就够，不用加visibility——它本身不可动画，但能确保元素在完全透明时不响应交互
transition 写在常态还是 :hover 状态下
必须写在常态选择器里（即非 :hover 的那条规则），否则第一次悬停时不会触发过渡。
- ✅ 正确：
.card { transition: opacity 0.2s ease-in; } - ❌ 错误：
.card:hover { transition: opacity 0.2s; }—— 这样只在离开时有动画，且首次进入无过渡 - 如果要不同方向过渡（比如进慢出快），得拆开写：
transition-property+transition-duration+transition-timing-function分别定义，再在:hover中只改目标值
图片边框悬停动画卡顿或跳变怎么办
本质是 border-width: 0 → 2px 触发了 layout 重排（reflow），浏览器必须重新计算整个布局，导致掉帧。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 解决办法一：始终保留 border，只动颜色 —— 初始写
border: 2px solid transparent;，悬停改border-color: #007bff; - 解决办法二：用
box-shadow模拟边框，例如box-shadow: 0 0 0 2px #007bff;，它不参与布局，过渡丝滑 - 千万别写
transition: all 0.3s;在图片上 —— 它会试图过渡width、height等可能被 JS 动态修改的属性，引发意外抖动
表格行悬停过渡为何只闪一下就结束
常见于给 tr 直接设 background-color 过渡，但表格默认 border-collapse: collapse，相邻 tr 的边框合并，导致背景色渲染边界不清晰，视觉上像“没过渡”或“局部闪烁”。
- 稳妥做法：给
td和th单独加过渡，而不是tr；或者把tr的background-color改成半透明白色（如rgba(255,255,255,0.8)）再过渡不透明度 - 必须限定作用域：用
tbody tr:hover，避免表头thead tr被误影响 - 移动端无 hover，真要兼容触摸设备，得用
:focus-within或 JS 添加临时 class，不能只靠 CSS
最易忽略的一点：transition 不生效时，先检查目标属性是否真的发生了“可计算的值变化”——比如从 auto 到具体像素、从 initial 到 inherit，这些都不是有效过渡起点。值必须两端都明确、可解析、可插值。
