Custom Cursor using CSS styling - html/css - javascript

问题

I'm trying to make a custom cursor without uploading an image.I want the cursor to be a little blue circle. Currently, I'm trying to set the cursor's css as an id. Then I would associate the built in CSS cursor styling with the new id:

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

};

Is this possible? Am I even going about this correctly? All help appreciated.

回答1:

If you want to have a custom CSS cursor, you need to add a div in your markup, style it, hide the default cursor and move it to the mouse coordinates :

$(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>

回答2:

Here are all types of cursors.

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

I think this is what you're looking for:

{ cursor: wait; }

来源：https://stackoverflow.com/questions/30866526/custom-cursor-using-css-styling-html-css-javascript