链接悬停时 cursor 不生效，主因是 css 优先级冲突或选择器未命中；需用开发者工具验证是否被覆盖，优先提升选择器特异性而非滥用 !important；移动端 safari 完全忽略 cursor 样式，应改用 :active、图标或颜色变化提供反馈。
链接悬停时 cursor 不生效？检查 CSS 优先级和选择器范围
直接写 a:hover { cursor: pointer; } 却没反应，大概率是样式被覆盖或选择器没命中。浏览器默认对 <a href></a> 元素已设 cursor: auto，但自定义值必须明确作用到悬停态，且不能被更高优先级规则（比如内联样式、!important 冲突、更具体的选择器）压制。
- 用浏览器开发者工具检查元素，看
cursor是否出现在“Computed”面板里，以及是否被划掉 - 确保选择器足够具体：如果链接在
.nav-item里，.nav-item a:hover比单纯a:hover更可能生效 - 避免滥用
!important—— 它会破坏可维护性；优先调整选择器权重或抽离为独立类名（如.link-hover-pointer）
支持哪些 cursor 值？区分语义与兼容性
cursor 值不是所有都通用。语义化取值（如 pointer、help、not-allowed）在现代浏览器中稳定支持；但像 zoom-in、grab 等在旧版 Safari 或 IE 中可能回退为 default。
- 最安全的交互型取值：
pointer（手型）、text（文本输入态）、wait（加载中） - 自定义图标需用
url()+ fallback，例如：cursor: url("hand.cur"), pointer;—— 必须提供 fallback 值，否则在不支持或路径失败时显示默认箭头 - 不要用
cursor: none在生产环境，它会彻底隐藏指针，用户无法感知交互反馈
React/Vue 等框架里动态切换 cursor？别直接操作 DOM
在组件化环境中，硬写 element.style.cursor = "wait" 容易遗漏还原逻辑，导致悬停结束后指针卡在 wait 态。应该交由状态驱动样式更新。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- React 示例：
<a href="#" style="{{" cursor: isprocessing :></a> - Vue 示例：
<a :style="{ cursor: loading ? 'wait' : 'pointer' }"></a> - 更推荐抽成 CSS 类：
:hover:not(.disabled) { cursor: pointer; }+.disabled { cursor: not-allowed; }，用 class 切换而非内联 style
移动端 Safari 的 cursor 为什么无效？
iOS Safari 和大部分移动浏览器**忽略 cursor 样式** —— 因为它们没有鼠标，也没有悬停概念（:hover 本身只在极少数场景下模拟触发）。所以任何依赖 a:hover { cursor: ... } 的视觉反馈，在真机上都不会出现。
- 这不是 bug，是规范行为。不要试图 hack 移动端的
cursor - 替代方案：用
:active改变背景色或加边框，提供点击反馈；或用aria-label+ 语音提示辅助理解可点击性 - 若需统一交互提示，建议改用图标（如右侧小箭头）、下划线或颜色变化，这些在移动/桌面端都可见
实际项目中最容易被忽略的，是移动端无 hover、无 cursor 这一事实 —— 很多人在桌面调试完就上线，结果用户在手机点不动还找不到反馈。
