时间戳

首页 > 解决方案 > 更改项目的光标

html - 更改项目的光标

问题描述

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

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

标签： htmlcssmouse-cursor

解决方案

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

推荐阅读