:hover纯CSS可实现，失效主因是选择器权重不足、行内样式不支持伪类、元素无宽高导致悬停区为0、滤镜掩盖颜色变化、transition未写在非hover状态规则中。
直接用 :hover 就能实现，不需要 JS，95% 的场景纯 CSS 足够。关键不是“能不能”，而是“为什么写了没反应”——绝大多数失效问题都出在选择器、特异性或初始样式缺失上。
为什么 :hover 写了但文字颜色不变？
不是代码语法错，而是被隐性规则压制。最常踩的坑有这几个：
-
color被父级加了!important，子元素:hover无法覆盖，得提升选择器权重（比如从.text:hover改成div .text:hover） - 目标元素是
<span></span>或<div>，但样式写在 HTML 的 <code>属性里——行内样式不支持伪类，必须挪到<style></style>块或外部 CSS 文件中 - 文字嵌套太深（比如
<div><p><span>文字</span></p></div>），而你只给span写了:hover，但span没设display: inline-block或明确宽高，导致悬停区域实际为 0 - 用了
filter（如grayscale(100%)）或opacity: 0.9，颜色其实变了，但视觉上被滤镜压住了，先关掉验证
transition 加在哪才生效？
必须写在「非 hover 状态」的规则里，否则第一次悬停没有动画。而且别对整个容器乱加 transition: all，容易拖慢渲染。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
.nav-link {
color: #666;
transition: color 0.2s ease, font-weight 0.2s ease;
}
.nav-link:hover {
color: #007bff;
font-weight: 600;
}
- 只列需要过渡的属性，避免
transition: all 0.2s—— 它会触发重排，尤其在低端设备上卡顿明显 - 如果元素本身没设
color，只靠继承，:hover可能不触发过渡，显式声明基础色更稳 -
ease是默认缓动，想更自然可用cubic-bezier(0.4, 0, 0.2, 1)，但没必要一开始就调参
表格行悬停变色为啥背景没变？
因为 <td> 或 <code><th> 自带背景色，盖住了 <code><tr>:hover 的 <code>background-color。不能只改 tr，得同步控制单元格。
可靠写法：
table tbody tr:hover {
background-color: #f8f9fa;
}
table tbody tr:hover td,
table tbody tr:hover th {
background-color: inherit;
color: #212529;
}
- 务必加
tbody，提高选择器特异性，避免被框架（如 Bootstrap）的.table-hover干扰 - 不要写
tr:hover td这种间接设置——一旦某个td有内联style="background: #fff"，就彻底失效 - IE10+ 才支持
tr上的transition，老版本需降级用 JS 绑定mouseenter/mouseleave
真正容易被忽略的点是：悬停效果是否在移动端有意义。iOS 和 Android 浏览器对 :hover 的支持仅限于模拟鼠标时短暂触发，手指长按不会持续响应。如果产品要兼顾移动，别把交互逻辑全押在 :hover 上，优先考虑点击态（:active）或 JS 管理的 selected 状态。
