更改项目的光标

问题描述

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

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

解决方法

要使用自定义图像，您可以在类中使用 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>

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

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

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

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

您不能在整个屏幕上使用光标效果，但可以在 body 中使用它：

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

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

html mouse-cursor