CSS Cursors

This tutorial explains cursors you can add to the link code in css.

You remember this code from my css links tutorial:

A:link{color:#COLOR; text-decoration:none; font-weight:normal;} A:visited{color:#COLOR; text-decoration:none; font-weight:normal;} A:active{color:#COLOR; text-decoration:none; font-weight:normal;} A:hover{color:#COLOR; text-decoration:none; font-weight:normal;}

Well now you can also add cursor:SOMETHING; to each code. It would basically go after the font-weight:normal; part.

Here's a list and explanation of what you can replace for SOMETHING.

wait -- hourglass
crosshair -- basically an X
hand -- self explanatory
help -- a questionmark
text -- the text cursor that looks like an I
move -- 4 arrows
"s-resize" -- arrow points south
"e-resize" -- arrow points east
"w-resize" -- arrow points west
"ne-resize" -- arrow points north east
"nw-resize" -- arrow points north west
"se-resize" -- arrow points south east
"sw-resize" -- arrow points south west

So as an example, this is what your links code might look like now.

A:link{color:#COLOR; text-decoration:none; font-weight:normal; cursor:wait;} A:visited{color:#COLOR; text-decoration:none; font-weight:normal; cursor:hand;} A:active{color:#COLOR; text-decoration:none; font-weight:normal; cursor:help;} A:hover{color:#COLOR; text-decoration:none; font-weight:normal; cursor:text;}

<-back