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

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?

Chris

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

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

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

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

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

cursor:url(uri)

night11

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.

来源：https://stackoverflow.com/questions/12368502/html-css-cursor-how-to-change-default-image-for-pointer

标签

html

css

pointers

cursor