:hover伪类可直接实现鼠标悬停样式变化，无需JavaScript；支持a、button、div等元素，但旧版IE兼容性有限；需兼顾移动端触摸设备、可访问性及性能优化。
直接用 :hover 伪类就能实现鼠标悬停时的样式变化，无需 JavaScript，简单高效。
在 CSS 中，给目标选择器后面加上 :hover，即可定义鼠标移入时的样式。浏览器会自动监听 hover 状态并切换样式。
a:hover { color: red; text-decoration: underline; }
a、button、div 等），但部分旧版 IE 对非链接元素支持有限（IE6 只支持 a）@media (hover: hover) 做兼容判断单独改颜色太单调，配合 transition 可让变化更自然。
transition: all 0.3s ease;（写在默认状态里，hover 中只改属性值）transform: scale(1.05);
border-bottom: 2px solid #007bff; + padding-bottom: 2px;，再配合 transition
background: linear-gradient(45deg, #007bff, #0056b3); → hover 时换方向或色值hover 
不仅能作用于自身，还能影响子元素、兄弟元素甚至父容器（需配合 HTML 结构）。
.card:hover .card-title { color: #007bff; }
h2 + p:hover { opacity: 1; }（注意是 p 被 hover，不是 h2）img:hover ~ .caption { display: block; }
视觉反馈要兼顾键盘用户和屏幕阅读器。