Skillfully use CSS to change the style of the cursor

by pc144 on 2008-05-03 19:58:49

People who are used to Windows will certainly be familiar with various mouse cursor styles. The shape of the mouse cursor changes when it moves to different places, performs different functions, or when the system is in different states. However, on web pages, a hand-shaped cursor usually only appears when hovering over hyperlinks, while there seems to be no change elsewhere. This doesn't quite harmonize with the dynamic nature of modern web pages. In fact, many types of mouse cursors can be easily defined using CSS. 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 toolbar) 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 pops up, press the "New" button. In the "New Style" dialog box that appears, choose "Make Custom Style (class)." Afterward, input `.cursor1` in the "Name" field below (that is, name the class you want to define; note the small dot before it should not be omitted). Click OK, and the "Style Definition for .cursor1" dialog box will immediately pop up (as shown in the figure below), allowing you to define the CSS for `.cursor1`.

...

(Note: Replace “as shown in the figure below” with an appropriate description if there’s an accompanying image in the original text.)