Subtly change the style of the mouse with a CSS style sheet

People accustomed to Windows must be familiar with a wide variety of mouse styles. When the mouse moves to different places, when the mouse to perform different functions, when the system is in a different state, will make the shape of the mouse changed. and on the Web page often only when the mouse on the hyperlink to appear a hand-shaped, in other places does not seem to change. It's not as harmonious as a Dynamic Web page. In fact, CSS makes it easy to define many kinds of mouse shapes. Using the method described in this article, you can set the different styles of the mouse in place of the page.

To create a hand-shaped mouse style effect in Dreamweaver3:

1, press F7 (or click on the Quick Launch bar, like "Gossip map" icon), bring up the CSS panel, select None, click the Edit icon in the lower part of the panel, press the "new" button on the pop-up "Edit Style Sheet" dialog box, and in the "New Style" pop-up When you select Make custom Style in the dialog box, type ". Cursor1" in the "Name" box below (that is, give a name to the class you want to define, note that the small point in front is not missing), press OK, and immediately eject "Style Definition for. Cursor1 dialog box (as shown in the following illustration), you can define the ". Cursor1" of CSS.

2, select "Extensions" in the selection window on the left of the "Style Definition for. Cursor1" dialog box, define (also select) the "Cursor" attribute on the right panel, this example asks the mouse shape to become a hand, so click on the triangle button, Select "Hand" in the pulled list of mouse styles, as shown in the previous illustration.

3, press OK button to return to the "Edit Style Sheet" dialog box, press the "Done" button, CSS do it. The CSS code seen between 〈head〉 and 〈/head〉 in the source code of the Web page is this:

〈style type="text/css"〉
〈!--
.cursor1 { cursor: hand}
--〉
〈/style〉

For users who are not using Dreamweaver3, copying the above code directly between 〈head〉 and 〈/head〉 will produce the same effect.

4, select a paragraph of text or image, click on the CSS panel on the ". Cursor1" on the line. Press F12 to move the mouse over the part of the mouse that has changed the style of CSS, the mouse will become a hand shape. For users who are not using DREAMWEAVER3, it is necessary to add class= "cursor" to the source code of the Web page.

To change the mouse to another shape, just select a different style when you define the "cursor" property in the second step. The meaning of each property value is as follows:

Crosshair: Precise positioning of the "ten" glyph; text: literal "I" shape; wait: Waiting, "hourglass"; default: Help with tail arrow; E-resize: arrow to right; ne-resize N-resize: arrow to the top; Nw-resize: arrow to the top left; W-resize: arrow to left; Sw-resize: arrow to the bottom, S-resize: arrow down, se-resize arrow to lower right; Auto: Automatic, The mouse changes its style according to the default state based on the elements on the page.

Understand the meaning of the above property values, the shape of the mouse in your grasp, need to let the mouse in there to change why the shape, as long as the above operation on the line. Note that you can only define one mouse style at a time, and if you use multiple-style mouse graphics on one page, define multiple "class" and load them when you choose.