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.

Mehdi Brillaud · Accepted Answer · 2015-06-16 11:55:20Z

4

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>

answered Jun 16, 2015 at 11:55

Mehdi Brillaud

1,8662 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3106974 · Accepted Answer · 2015-06-16 11:47:18Z

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

answered Jun 16, 2015 at 11:47

user3106974

11010 bronze badges

2 Comments

kirk Over a year ago

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?

user3106974 Over a year ago

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

Collectives™ on Stack Overflow

Custom Cursor using CSS styling - html/css - javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related