Custom Cursor using CSS styling - html/css - javascript

Question

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.

Shaughnessy

Answer 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>

Eraser

Answer 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; }

Emendate

So would I overwrite that? I'm not looking for built in types, I'm trying to create a custom one, but I don't want to upload an image. I want to know if I can make a CSS class/element and assign it as the cursor. Signs are saying "No", is this accurate? – Shaughnessy

You could do it like this {cursor: url(images/my-cursor.png), auto;} But as you can see it requires an image – Emendate