html, css - cursor - how to change default image for pointer

Question

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

To create a class and specify the hover value for cursor is not a valid solution since

Answer 1

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

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

Answer 2

Using the "cursor" property is the same as with any CSS property- simply apply it to the desired element:

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

This changes the default arrow cursor of a webpage to a custom image instead.

Answer 3

None of these worked for me. I had to use this slightly different syntax. Notice the lowercse 'url' , the quotes around the path, and adding of !important. Also, any size works.

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

Answer 4

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

cursor:url(uri)

Answer 5

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

I misunderstood that at first, but after reading this comment, things were clearer.

You can do this easily using jQuery/JavaScript. First, here's the slightly-simpler jQuery version:

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

Pure JavaScript version:

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 6

yes you can do this easily as like this

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

image file must be 32x32 or smaller

apparently internet explorer only supports .cur files

more info