直接用:hover伪类即可实现按钮悬停变色，需确保按钮为可交互元素（如），同时修改背景色与文字色以保障对比度，并在常态样式中定义transition实现平滑过渡。

怎么用CSS实现鼠标悬停按钮变色

直接给按钮加 :hover 伪类就行，不用JS，纯CSS最轻量也最可靠。关键不是“能不能”，而是“怎么写才不翻车”。

• 必须确保按钮是可交互元素（比如 或带 role="button" 的
  ），否则部分浏览器可能不触发 :hover
• 颜色变化别只改文字色——同时改背景色和文字色，不然对比度可能不达标（尤其深色背景上白字悬停变浅灰）
• 别用 !important 硬覆盖，优先靠选择器权重解决冲突，比如用 button:hover 比 .btn:hover 权重高

初学者最容易写的三行有效代码

下面这段可以直接复制进HTML的 标签里，改完就能看到效果：

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
}
button:hover {
  background-color: #45a049;
  color: #fff;
}

注意：这里用了相近色阶（#4CAF50 → #45a049），视觉过渡自然；没加 transition 是为了降低初学门槛，但实际项目中建议补上 transition: background-color 0.2s; 防止突变。

为什么点击后按钮颜色卡住不恢复

这不是悬停问题，是浏览器把按钮记成了“已激活”状态，常见于用 标签模拟按钮时没重置 :active 或 :visited 样式。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 如果用 当按钮，加一行 a:hover, a:active, a:visited { color: inherit; text-decoration: none; }
• 移动端真机上 :hover 行为不可靠（没有“悬停”概念），需要额外加 :active 做兼容，比如 button:hover, button:active { background-color: #45a049; }
• 某些CSS框架（如Bootstrap）会自带 :hover 样式，直接覆盖时要检查开发者工具里哪条样式被划掉了

要不要加 transition 动画

要，但得控制好参数。初学者常犯的错是写成 transition: all 0.3s; —— 这会让所有属性（包括 font-size、border）都动，反而卡顿或意外变形。

• 只过渡明确要变的属性：transition: background-color 0.2s ease, color 0.2s ease;
• 时间别超过 0.3s，人眼感知延迟明显；低于 0.1s 又像没动，0.2s 是平衡点
• 别在 :hover 里再写 transition，它只该定义在常态样式里（即 button { ... transition: ...; }）

真正容易被忽略的是：悬停效果是否在暗色模式下依然可读。测试时顺手切一下系统偏好，看看 background-color 和 color 在深色背景下是否还够对比。