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 I would have to add that class to all elements already made and is you know... not exactly optimal. Also can't add that class to body since the children with cursor: pointer would overwrite it.

Any idea how to do that?

Answer 1

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