Tuesday 18 August 2009

How do you change the mouse cursor using CSS?

An easy one for all the HTML and CSS gurus out there, but up until today I wasn't even aware you could change the cursor on an HTML page using CSS.

So earlier on, I have a number of DIVs that are in effect some large buttons which I have added some hover code to show highlighting etc, which of course led me to ideally need to change the cursor so the user knows clicking will be applicable. All you need is to set the cursor style to pointer - in the case a hand for links e.g

.mylink {cursor:pointer}

Now of course there are a load of other cursor values - auto, crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, s-resize, se-resize, sw-resize, text, wait, w-resize. Which most are fairly self explanatary I think but at least you can change them now!

Finally, and I havn't tried this but you can even go so far as providing yor own cursors! You do this specifying a url in the CSS cursor:url('path to cursor'). I haven't tried this, and may not need to, but if I do I will add new a post!!

No comments:

Post a Comment