Changing the Cursor

Normally, the browser takes care of the cursor shape for you, using an arrow most of the time, and a pointing finger to highlight links. CSS lets you take the reigns.

To change the cursor:

1.

Type cursor:.

2.

Type pointer for the cursor that usually appears over links (), default for an arrow (), crosshair (), move (), wait (), help (), text (), progress (). Figure 11.49. When you point to the home link, the cursor changes to a pointing hand and the link is highlighted, just as for any other link. Or type auto to get whatever cursor usually appears in that situation. Or type x-resize to get a double-sided arrow, where x is the cardinal direction one of the arrows should pointthat is, n (north), nw (northwest), e (east), etc. For example, the e-resize cursor might look like this: .

Figure 11.50. Because we're on the home page, the home link will be part of the current class. We can then change the cursor and background of the home link so that it doesn't act like a link.

Figure 11.51. Although this continues to be a real, live link, it no longer looks like one. Since we are already on the page to which this link goes, that makes sense.

Tips

• The illustrations shown above are from IE 6. The cursors vary slightly from browser to browser and system to system. For example, the wait cursor on a Mac is the familiar watch: .

• I find the names confusing. The default isn't the default, but instead is an arrow, which I would call a pointer, but pointer means a hand, while hand is a non-standard value created by Microsoft. Ugh.