Tuesday, April 16, 2024

CSS and Cursors

     Ah, the cursor. Some like the pointing finger, some like that I-beam-looking thing, and others try to lose the cursor altogether. Whatever your cup of tea, CSS version 2.0 is trying to help. Internet Explorer 4.0 has supported these commands as of 1/17/98. I’m sure Navigator won’t be too far behind.
     Seventeen different cursor properties have been incorporated into standard CSS so you can be pretty sure some of these will work. I say “some of these” because the cursor look depends a lot more on the operating system and settings your user has set. If you didn’t know it, you can set your cursor to a whole bunch of different standard settings and even install new cursors that animate. At one time, my cursor was Snoopy on his Sopwith Camel; when I clicked on something it became a TV set with snow on the screen. I’m just a fun guy, I guess.

     So I offer this chart as help. Each link points back to this page so even if you click, it’ll just reload. Plus the link will be a description of what you should see.
     The Style Sheet command is incorporated by adding the STYLE=”–” format into the anchor command like so:

<A HREF=”/beyond/css_cursors.html
STYLE=”cursor: auto”>Text</A>

     Of course, you can also put these into a Style Block and alter the cursor for all your links at once:

<STYLE>
     link {cursor: crosshair}
<STYLE>

     So, here we go. These are the chosen seventeen. Roll your pointer over the top. Depending on a lot of factors, you may get it or you may not.

cursor: auto (uses what is set by user)
cursor: crosshair (should produce a cross)
cursor: default (cursor remains as it is)
cursor: e-resize (arrow pointing right)
cursor: hand (the traditional pointing hand)
cursor: help (a Question Mark should appear)
cursor: move (a cross with arrows on the tips)
cursor: n-resize (an arrow pointing north or up)
cursor: ne-resize (an arrow pointing northeast)
cursor: nw-resize (an arrow pointing northwest)
cursor: pointer (that hand again)
cursor: s-resize (an arrow pointing south or down)
cursor: se-resize (an arrow pointing southeast)
cursor: sw-resize (an arrow pointing southwest)
cursor: text (looks like the end of an I-beam)
cursor: w-resize (an arrow pointing west)
cursor: wait (an hourglass)

     There you go. Use them wisely.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured