更改项目的光标

Question

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

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

你不能让光标效果横跨整个屏幕，但你可以在 body:

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

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

更改项目的光标

Changing cursor for project

html

css

mouse-cursor