加:hover无效果主因是语义错误、无障碍差且移动端不触发；必须用或带href的等可交互元素，确保cursor:pointer、pointer-events:auto及transition正确绑定。

不用写 JavaScript，纯 CSS 就能实现按钮悬停效果，但必须用 <button></button> 或带 class 的 <a></a> 标签，直接给 <div> 加 <code>:hover 不会触发交互反馈。

为什么 <div> 加 <code>:hover 看不到效果？

很多新手把按钮写成 <div>点击我</div>，然后在 CSS 里写 div:hover { background: red; }——这确实能变色，但语义错误、无障碍支持差，更重要的是：手机端根本不会触发 :hover（没有鼠标），用户点不下去也没反馈。浏览器对非可交互元素的 :hover 行为不保证一致。

• 必须用语义化交互标签：<button></button>（推荐）或 <a href="#"></a>
• 确保元素有默认焦点能力（<button></button> 自带，<a></a> 需要 href 属性）
• 避免用 <span></span>、<p></p>、<div> 模拟按钮 <h3> <code>button:hover 的基础写法和常见坑

最简可行代码就三行，但容易漏掉关键细节：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

button {
  background-color: #007bff;
  border: none;
  padding: 10px 20px;
}
button:hover {
  background-color: #0056b3;
}
button:active {
  background-color: #004080;
}

• button:hover 只在鼠标指针悬停时生效，离开即恢复；:active 是按下瞬间的状态，加它能让点击更有反馈
• 别忘了重置 border：默认按钮有边框，不设 border: none 会导致悬停时边框跳动
• 如果用了 font-size 或 padding，确保 :hover 和默认状态尺寸一致，否则布局会抖动
• 颜色对比度要够：WCAG 要求文本与背景对比度 ≥ 4.5:1，可用在线工具检查

想加动画过渡？必须加 transition

直接改颜色会“啪”一下跳变，加 transition 才是平滑效果。但只写 transition: all 0.3s; 是懒人写法，隐患多：

• 优先指定属性：transition: background-color 0.2s ease, color 0.2s ease;，避免意外触发其他属性动画
• 别对 all 过渡：比如同时改 width 和 background-color，但只希望颜色动，结果整个按钮缩放，UI 失控
• 移动端慎用 hover 动画：iOS Safari 对 :hover 支持延迟且不稳定，建议搭配 @media (hover: hover) 条件查询做降级

按钮不可点击？检查这三件事

写了 :hover 却没反应，90% 是以下问题：

• HTML 中漏了 闭合标签，导致后续样式失效
• CSS 选择器权重不够：比如用了 div button:hover，但实际结构是 <section><button></button></section>，应写成 section button:hover 或加 !important（临时调试可用，上线前删掉）
• 父容器设置了 pointer-events: none 或 opacity: 0，整个按钮被“屏蔽”了

真遇到疑难问题，打开浏览器开发者工具，选中按钮元素，看右边 :hover 是否被勾选，再看 computed 样式里 background-color 值有没有变化——这是最直接的验证方式。