移除渐变文本hover样式，实现鼠标悬停时文本变蓝色的方案

问题根源在于你给span设置了-webkit-text-fill-color: transparent，这个属性优先级高于color，所以hover时的color: blue无法覆盖透明填充，自然看不到蓝色效果。

修改后的CSS代码如下：

span {
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  background: -webkit-linear-gradient(90deg, rgba(0, 255, 19, 1) 0%, rgba(0, 209, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  transition: all 500ms ease;
}

span:hover {
  background: none;
  -webkit-text-fill-color: blue;
  color: blue;
}

关键修改点：

• hover状态下移除渐变背景，避免和文字颜色冲突
• 用-webkit-text-fill-color: blue直接覆盖初始的透明设置，同时保留color: blue做跨浏览器兼容
• 优化过渡属性为all 500ms ease，让颜色切换更平滑（也可以保留原有的transition: 500ms）

内容的提问来源于stack exchange，提问作者Vans