自定义光标使用 CSS 样式 - html/css - javascript

Custom Cursor using CSS styling - html/css - javascript

本文关键字：html css javascript 样式 光标 CSS 自定义      更新时间：2023-09-26

我正在尝试在不上传图像的情况下创建自定义光标。我希望光标是一个蓝色的小圆圈。目前，我正在尝试将光标的 css 设置为 id。然后我会将内置的 CSS 光标样式与新 id 相关联：

.mainbody{
....
cursor:#id?
};

这可能吗？我甚至做对了吗？所有的帮助都表示赞赏。

如果你想有一个自定义的CSS光标，你需要在你的标记中添加一个div，设置它的样式，隐藏默认光标并将其移动到鼠标坐标：

$(document).ready(function() {
  $(document).on('mousemove', function(e) {
    $('#cursor').css({
      left: e.pageX,
      top: e.pageY
    });
  })
});
html {
  cursor: none;
}
#cursor {
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background-color: blue;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor"></div>

以下是所有类型的游标。

https://css-tricks.com/almanac/properties/c/cursor/

我认为这就是你要找的：

{ cursor: wait; }
相关文章：