在 CSS 中将光标更改为手形指针

在可供用户操作的元素上设置 cursor: pointer;，鼠标悬停时就会显示熟悉的手形光标。链接通常已经使用这种光标；按钮或自定义交互控件也可以使用同一规则来显示操作提示。请用它来强调操作，不要让装饰性元素看起来像是可以点击的。

将 CSS 的 cursor 属性设为 pointer

将这条声明添加到链接、按钮或其他交互元素所用的选择器中。下面的 JavaScript 示例会输出按钮对应的 CSS 规则，你可以将其复制到样式表中。输出内容就是这条规则。

const rule = "button { cursor: pointer; }";
console.log(rule);

button { cursor: pointer; }

这个完整页面示例还展示了如何将该规则用于链接和按钮。页面中链接、按钮和区块的可见文字保留为英文。请根据自己的标记调整选择器。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pointer cursor example</title>
  <style>
    a,
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a href="#details">View details</a>
  <button type="button">Show details</button>
  <section id="details">
    <h1>Details</h1>
    <p>This section is the destination of the View details link.</p>
  </section>
</body>
</html>

pointer 是 CSS 中表示手形光标的关键字。带有有效 href 的链接通常会默认显示这种光标，因此普通链接往往不需要显式添加这条规则。按钮也是交互控件，应用这条规则可以让按钮与链接的光标提示保持一致。如果自定义元素会响应点击，请同时提供恰当的语义和键盘操作方式；仅设置光标并不能让元素具备可访问性或交互功能。

选择只匹配可执行操作控件的选择器。例如，全站范围的 button 规则会匹配原生按钮，而 .open-panel 这样的类可以只匹配某个自定义控件。不要给所有元素或只是看起来像控件的文本都设置 pointer：这种视觉提示会让用户以为该元素可以操作。请通过链接或按钮提供实际操作，并将光标样式作为辅助提示。如果其他 CSS 规则覆盖了这条声明，请检查样式表中匹配的选择器及其层叠关系。

使用带回退值的自定义光标图片

如果想用图片代替浏览器的标准手形光标，可以将 cursor 的值设为 url()，后面再加一个回退关键字。例如，cursor: url("/images/hand-cursor.png"), pointer; 会让浏览器尝试使用 /images/hand-cursor.png；如果图片无法加载或使用，则回退到 pointer。请将图片放在网站中的该路径下，或者将 URL 改为图片的实际位置。外部样式表中的相对 URL 会以该样式表为基准解析，而内联 CSS 中的 URL 则以文档的基础 URL 为基准解析，因此路径缺失或错误时，自定义图片不会显示；回退值仍会提供标准手形光标。如果希望元素使用浏览器通常采用的光标，也可以用 auto 作为回退值。请保留声明中的回退值，这样图片不可用时用户仍能看到清晰的光标提示。