How To CSS Custom Cursor Tutorial
This code will give you your custom cusor of your choice. You can place it in the <head> or your .css. It works "almost" perfectly in IE7, IE6, Firefox, and Safari. Unfortunately, this does not work in Opera. Trust me, I scowered the web - this is the closest to perfect pure css method you will find. Because of browser limitations, it's still a little buggy. You will still need to go out and find your cursor images though. I found mine at google images. Then, just link to the images as shown in the code below.
Firefox and Safari need a keyword after the url in order to display the cursor image - IE does not. In this case, "auto" works perfectly! For IE, the image file extension needs to be a .cur or .ani. Firefox and Safai will only recognize .cur. The a:active (wait) cursor will only display correctly in IE because of the way it treats a:active.
body {
cursor: url("images/arrow.cur"), auto;
}
a, label, .submit {
cursor: url("images/hand.cur"), auto;
}
a:active {
cursor: url("images/wait.ani"), auto;
}
p, h1, h2, h3, h4 {
cursor: url("images/text.cur"), auto;
}
