Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change window cursor with pure CSS

I know you can change the cursor of a web page with an image, but is it possible to 'style' the cursor only using CSS?

Something like...

div.changecursor:cursor {
    width: 10px;
    height: 10px;
    background: blue;
    border-radius: 199px; /* make it a circle */
}
like image 207
Jody Heavener Avatar asked Apr 26 '13 00:04

Jody Heavener


People also ask

How do I change my mouse cursor in CSS?

You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.

What CSS property can be used to change the mouse pointer?

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

What is curser pointer in CSS?

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user. One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changes from a pointer to a hand.


1 Answers

The cursor property allows the use of an url linking an image to be used as cursor. In that way you may customize as much as you want

property and value

.classX {
cursor: url(myCursor.cur);
}

Ok with a gif, etc

like image 173
Fico Avatar answered Oct 16 '22 21:10

Fico