CSS 中 cursor: pointer 需配合伪类 :hover 使用，直接在 button 元素上声明不会生效；正确做法是为 button:hover 单独设置该样式。

css 中 `cursor: pointer` 需配合伪类 `:hover` 使用，直接在 `button` 元素上声明不会生效；正确做法是为 `button:hover` 单独设置该样式。

在 CSS 中，cursor 属性用于定义鼠标指针在元素上方时的形状。虽然 cursor: pointer 常被误认为可“默认启用”于可交互元素（如 <button>），但浏览器默认已将 <button> 的 cursor 设为 pointer——因此多数情况下无需额外设置。但若自定义样式覆盖了默认行为（例如重置了 all: unset、或父级设置了 cursor: default），或希望显式强化交互反馈，则必须通过 :hover 伪类精准控制。

✅ 正确写法如下：

button {
  margin: 10px;
  padding: 5px;
  background-color: lightsalmon;
  width: 20%;
  font-weight: bold;
  color: white;
  border: 1px double dodgerblue;
  border-radius: 3px;
  /* 注意：此处不写 cursor: pointer */
}

/* 关键修复：为悬停状态单独声明 */
button:hover {
  cursor: pointer;
}

⚠️ 注意事项：

• 不要在 button 基础选择器中直接写 cursor: pointer 并期望它“始终生效”——该声明虽会被解析，但因 <button> 默认已有 pointer 行为，且未触发交互上下文，实际效果不可靠；
• 若页面中存在 * { cursor: default; } 或容器级 cursor: text 等全局/父级样式，会层叠覆盖子元素的 cursor 设置，此时仅靠 button:hover 仍可能失效，需检查样式优先级与继承链；
• 现代浏览器对 <button> 的原生 cursor 支持良好，推荐优先依赖浏览器默认行为；仅当需要统一 UI 风格（如所有可点击元素均显示手型）或修复特定覆盖场景时，才显式使用 button:hover { cursor: pointer; }；
• 移动端无 hover 状态，该样式不影响触控体验，但也不会报错，可安全保留。

? 总结：cursor: pointer 本身无错，问题在于应用时机——它应作用于用户意图交互的反馈阶段（即 :hover），而非静态声明。遵循“语义化 + 状态驱动”的 CSS 实践，既能保证功能正确，也更符合可访问性与维护性要求。

立即学习“前端免费学习笔记（深入）”；