hover伪类无法直接用linear-gradient设置文字颜色，需用background-image+background-clip:text实现；须设color:transparent、display:inline-block，并注意浏览器对background-image过渡的支持差异及pointer-events影响。
hover 伪类本身不能直接设置 linear-gradient 作为颜色
因为 color 属性只接受纯色（如 #333、rgb(51, 51, 51)），不支持渐变。你写 a:hover { color: linear-gradient(to right, red, blue); } 是无效的，浏览器会直接忽略这一行。
用 background-image + background-clip: text 实现文字渐变 hover
这是目前最可靠、兼容性足够（Chrome 12+、Firefox 70+、Safari 15.4+）的文字渐变方案。关键在于把渐变当背景，再“裁剪”到文字轮廓上：
-
background-image: linear-gradient(...)设置渐变背景 -
background-clip: text让背景只显示在文字区域 -
-webkit-background-clip: text是 Safari/旧 Chrome 必需的前缀 -
color: transparent把文字本色清空，否则会盖住渐变 - 必须用
display: inline-block或inline-flex等触发background-clip: text生效（display: inline不行）
a {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #667eea, #764ba2);
display: inline-block;
transition: background-image 0.3s ease;
}
a:hover {
background-image: linear-gradient(to right, #f093fb, #f5576c);
}
注意 transition 对 background-image 的限制
不是所有浏览器都支持 background-image 的过渡动画。Chrome 和 Edge 基本可用，Firefox 目前仍不支持渐变背景的平滑过渡（会跳变）。如果需要全平台平滑效果，得换思路：
- 用两个重叠的
<span></span>：一个常显基础色，一个 hover 显渐变，靠opacity过渡（更稳妥） - 或改用
filter: hue-rotate()/filter: brightness()配合单色做视觉渐变感（性能好但非真渐变） - 若只需两色切换，可预设多个 class，用 JS 切换避免依赖 CSS 过渡
别漏掉 pointer-events: none 在某些布局里的副作用
如果你给链接加了 background-clip: text 后发现 hover 区域变小或点击失灵，检查是否误加了 pointer-events: none（常见于为了禁用点击而加在父容器上）。该属性会阻止整个元素响应鼠标事件，包括 :hover 触发。
立即学习“前端免费学习笔记（深入）”；
另外，background-clip: text 在 flex 或 grid 子项中有时会因缩放或字体渲染差异导致渐变错位，建议固定 font-size 和 line-height，避免使用相对单位如 rem 动态缩放时出问题。
