更改项目的光标答案

【问题标题】：Changing cursor for project更改项目的光标
【发布时间】：2021-07-19 09:28:45
【问题描述】：

我想学习如何制作一个简单的 HTML 文件，将光标更改为自定义图像，同时在整个页面上无延迟地进行跟踪（与我的操作系统 Mac 上的功能相同，但我希望使用GUI 项目的新光标）。

我已阅读所有 CSS 属性规则¹。问题是这些仅适用于当我将鼠标悬停在 div 属性或按钮上时，当我希望它永久工作时。

【问题讨论】：

your-element-selector { cursor:url("path/to/your/custom/cursor.png") }
你能不能说得具体点，我不明白你在这个声明中的意思。
下面的答案解释得更好。
这里的大多数答案都使用body，尽管这仅在正文中有元素可以使光标处于活动状态时才生效-它不会完全覆盖整个页面，而如果您申请html 元素本身的规则，您可以将光标应用到整个页面，无论光标在页面内的哪个位置，请参阅我的答案以获取更多信息。
@Skully 是的，我对这些答案有些困惑，因为 html 标签是而不是 body {}。你能解释一下哪种方法是实现这个的首选方法吗？

【解决方案1】：

要使用自定义图像，您可以使用类中的cursor: url 属性并指定要替换光标的图像路径。

.cursor {
    cursor: url("image-path.png");
}

如果您想将光标应用到整个页面，可以将 CSS 规则添加到 html 元素。

<html>
  <head>
  <style>
      html {
          cursor: url("https://i.imgur.com/8Jhi9oS.png"), auto;
      }
  </style>

  <body>
      This page has a custom cursor!
  </body>
</html>

【讨论】：

谢谢，这对我很有效。如何添加计算机上的图像；我已将路径“/Users/user/Downloads/47a.jpg”添加到您的“https::..”位置，但无效。
路径是相对于你的 HTML 文件所在的目录，所以你不需要写 完整路径 到它，例如如果你有你的HTML 文件和图像在同一个文件夹中，文件 URL 只是文件名和扩展名url("47a.jpg")。请参阅HTML File Paths 了解更多信息。
好的！使用路径必须有限制，它只适用于我的 .cur 文件。
您确定url() 中的文件路径和扩展名根据您的HTML 文件的位置是正确的吗？无论文件扩展名是否为.cur 文件，它都应该可以工作。
是的，我正在运行 macOS。

【解决方案2】：

嘿，如果你的意思是你希望光标在该页面上的任何地方都是自定义的，你可以使用这个：

body {
  cursor: url('path-to-image.png'), auto;   
}

如果您只想在网站的特定部分使用它，您可以将正文更改为类、标签或 ID。

结帐https://css-tricks.com/using-css-cursors/了解更多信息

【讨论】：

, auto 部分在做什么？
如果高度：自动；该元素将自动调整其高度以使其内容正确显示。 W3Schools
当然，如果分配给height，那么它在cursor 中做了什么？
抱歉，我正在考虑另一个对话。如果 url 部分不起作用，则 auto 部分是后备。 More info

【解决方案3】：

你不能在整个屏幕上有光标效果，但你可以在body：

body {
  cursor: url('mycustomcursor.cur');
}

如果您有想要使用的图像，则必须通过 Cursor Editor 之类的转换器运行它，并使用 .cur 文件作为 URL。

【讨论】：

这是不正确的信息，实际上您可以通过将规则直接应用于html 元素来更改整个页面的光标。有关此示例，请参阅我的答案。
@Skully 信息正确。您无法使用 CSS 影响视口外的光标。
OP 专门要求在页面内使用自定义光标，而不是 整个窗口，如果这是您的答案所指的，也许可以从“整个屏幕”调整您的参考到“窗口”以避免混淆？
@Skully 我的意思是整个屏幕，包括桌面、工具栏，以及网页无法访问的部分网页窗口，比如搜索栏。我说“在体内”这一事实应该已经澄清了这一点。