Skillfully use CSS to change the style of the cursor

by pc144 on 2008-04-08 00:11:52

People who are accustomed to Windows will certainly be familiar with the various styles of mouse cursors. The shape of the mouse cursor changes when it moves to different locations, when it performs different functions, or when the system is in different states. On web pages, however, the cursor usually only changes into a hand shape when hovering over hyperlinks, and there seems to be little change elsewhere. This isn't very harmonious with the dynamic nature of web pages. In fact, CSS can conveniently define many types of cursor shapes. With the method introduced in this article, you can set different cursor styles in any part of a webpage.

Steps to create a hand-shaped cursor style effect in Dreamweaver 3:

1. Press F7 (or click on the icon resembling a "yin-yang symbol" in the Quick Start bar) to bring up the CSS panel. Select "none," then click the edit icon at the bottom of the panel. In the "Edit Style Sheet" dialog box that appears, press the "New" button. In the "New Style" dialog box that pops up, choose "Make Custom Style (class)." Then, in the "Name" input box below, enter ".cursor1" (note: don’t forget the dot in front). Click OK, and immediately the "Style Definition for .cursor1" dialog box will appear (as shown in the figure below), where you can define the CSS class ".cursor1."

2. In the left selection window of the "Style Definition for .cursor1" dialog box, select "Extensions." On the right panel, define (or select) the "Cursor" property. Since the goal here is to change the cursor's shape into a hand, click the triangle button and select "hand" from the list of cursor styles that appears (as shown in the figure above).

3. Click the OK button to return to the "Edit Style Sheet" dialog box, then press the "Done" button. The CSS is now complete. Between the `` and `` tags in the webpage source code, you'll see CSS code like this:

```html

```

For users not using Dreamweaver 3, simply copy the above code between the `` and `` tags to achieve the same effect.

4. Select a piece of text or an image, then click ".cursor1" on the CSS panel. Press F12, and move the mouse over the area where the CSS that modifies the cursor style has been applied — the cursor will change into a hand shape. For users not using Dreamweaver 3, you need to add `class="cursor1"` to the webpage's source code.

If you want to change the cursor into other shapes, simply select different styles when defining the "cursor" property in step 2. Below are the meanings of each property value:

- `crosshair`: precise positioning cross ("+")

- `text`: text editing "I" shape

- `wait`: waiting state, "hourglass" shape

- `default`: default pointer

- `help`: help pointer, arrow with question mark

- `e-resize`: arrow pointing to the right

- `ne-resize`: arrow pointing to the top-right

- `n-resize`: arrow pointing upwards

- `nw-resize`: arrow pointing to the top-left

- `w-resize`: arrow pointing to the left

- `sw-resize`: arrow pointing to the bottom-left

- `s-resize`: arrow pointing downwards