:hover伪类必须配合具体元素选择器使用，如button:hover；单独写:hover无效；支持a、.nav-item、div等可交互元素，但移动端safari对非可点击元素支持不稳定。
hover伪类写在哪？必须配合具体元素选择器
单独写 :hover 没有效果，它只是个状态修饰符，必须挂载在某个可交互的元素上。比如想改按钮悬停背景，得写 button:hover，而不是只写 :hover。
- 常见错误：直接写
:hover { color: red; }→ 浏览器忽略，无任何变化 - 正确写法：
a:hover、.nav-item:hover、img.thumbnail:hover - 支持的元素不限于链接，
div、span（需有cursor: pointer或其他触发条件）、button都可以 - 注意：移动端 Safari 对非可点击元素的
:hover支持不稳定，部分设备会延迟触发或不触发
哪些CSS属性能用在hover里？不是所有都生效
:hover 本身不限制属性，但浏览器是否重绘、是否支持动画、是否触发重排，取决于你改的是什么属性。
- 安全高效：颜色类（
color、background-color）、透明度（opacity）、文字装饰（text-decoration）——通常走GPU加速，流畅 - 谨慎使用：
width、height、margin、padding—— 触发 layout，可能卡顿，尤其在列表项多时 - 别乱动：
display（none→block）会导致元素消失/出现，破坏流式布局；改了也看不到过渡效果 - 想加动画？必须显式声明
transition，例如：button { transition: background-color 0.2s ease; } button:hover { background-color: #007bff; }
hover失效的三个高频原因
写了但没反应？大概率掉进这三个坑里。
- 父元素设置了
pointer-events: none—— 子元素再怎么写:hover也收不到鼠标事件 - 目标元素被遮挡（z-index 太低，或上面盖了透明
div），实际悬停的不是你写的那个选择器 - CSS优先级不够：比如外部库的
a:hover { color: #333; }覆盖了你的.my-link:hover { color: blue; }，加!important是下策，优先用更具体的选择器，如.header a.my-link:hover
伪类链式写法：hover + 其他状态一起用
一个元素可以同时满足多个状态，比如既悬停又聚焦，或者悬停时内部某子元素也要变
- 组合状态：
a:hover:focus（鼠标悬停且键盘聚焦），适合可访问性增强 - 嵌套写法：
.card:hover .card-title—— 卡片悬停时，内部标题才变色，比给.card-title:hover更可控 - 注意顺序：
a:link:hover和a:hover:link效果一样，但按规范建议把:link放前面，避免和:visited冲突 - 不要滥用：
div:hover:hover合法但无意义；button:hover:active实际不会触发，因为:active是按下瞬间，和 hover 不重叠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
