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

Question

我想在不上传的情况下制作自定义光标 image.I 希望光标是一个蓝色的小圆圈。目前，我正在尝试将光标的 css 设置为一个 id。然后我会将内置的 CSS 光标样式与新的 id:

相关联

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

};

这可能吗？我是否正确地解决了这个问题？感谢所有帮助。

Answer 1

这里是所有类型的游标。

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

我想这就是您要找的：

{ cursor: wait; }

Answer 2

如果你想要自定义 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>

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

Custom Cursor using CSS styling - html/css - javascript

html

javascript

css

cursor

styling