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?

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

Solution 2

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

Solution 3

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

Solution 4

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

View more solutions

Comments

[Sikshya Maharjan]

Not down-voting, but the question does explicitly state: 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.

[zozo]

I don't need the cursor to look somehow. I need the cursor to look somehow when is a pointer. That changes the cursor to be something. If is pointer is still the hand.

[Sikshya Maharjan]

In which case, I think you're going to be stuck with specifying a particular cursor image for all elements that would cause the cursor to be a pointer. So, a, button {/*...*/}` etc.

[zozo]

This sucks :| Is exactly what I was trying to evade.

[Sikshya Maharjan]

Yeah, it's not ideal, but I'm not aware of any means by which one could express 'the pointer cursor should look like this' in CSS. And even in JavaScript, I think it'd essentially have to be done the same way. =/

[Chris]

@zozo In that case, please take a look at my answer for a solution using JavaScript.

[Chris]

Not what the OP requires, refer to this.

[Rick Davies]

Plus one for the size limit!