Html, css - cursor - how to change the default image for a pointer

Question

I need to change the default image for the cursor: a pointer with some custom image.

To create a class and specify a hover value for the cursor, this is not a valid solution, since I would have to add this class to all elements already done, and you know ... not quite optimal. Also, you cannot add this class to the body, since children are with a cursor: the pointer will overwrite it.

Any idea how to do this?

Answer 1

I need to change the default image for the cursor: a pointer with some custom image.

I misunderstood this, but after reading this comment , everything was clearer.

You can do this easily using jQuery / JavaScript. Firstly, here is a slightly simpler version of jQuery:

$("*").each(function() { var cur = $(this); if(cur.css("cursor") == "pointer") { cur.css("cursor", "url(newcursor.ico)"); } }); 

Pure version of JavaScript:

 var elms = document.getElementsByTagName("*"); var n = elms.length; for(var i = 0; i < n; i ++) { if(window.getComputedStyle(elms[i]).cursor == "pointer") { elms[i].style.cursor = "url(newcursor.ico)"; } } 

Answer 2

You can create a custom cursor for the body element, which, if not overridden by later selectors, will act as the default:

 body { cursor: URL(images/cursorimage.cur); /* IE */ cursor: URL(images/cursorimage.gif); } 

Answer 3

yes you can do it easily as if it

  .anyclass{ cursor: URL(images/cursorimagefule.gif); } 

image file should be 32x32 or less

Apparently, Internet Explorer only supports .cur files.

more details

Answer 4

None of them worked for me. I had to use this slightly different syntax. Pay attention to the bottom "url", quotation marks around the path and adding importance. In addition, any size works.

 body { cursor: url("mouseSm.png"), auto !important; } 

Answer 5

With cursor options can be found here http://www.echoecho.com/csscursors.htm for the image you can use

 cursor:url(uri) 

Answer 6

Using the cursor property matches any CSS property - just apply it to the element you want:

 <style type="text/css"> body{ cursor: url(mycursor.cur) } </style> 

This changes the default arrow cursor on the web page instead of the custom image.