Subtly use CSS style sheets to change the style of the mouse immediately

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 is often only when the mouse on the hyperlink to appear a hand-shaped, in other places does not seem to change, with a Dynamic Web page is not very harmonious. 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 Dreamweaver:

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, 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 list of pulled mouse styles.

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 Dreamweaver, 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 Dreamweaver, 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: Accurate positioning of the "ten" shape; Text: "I" form; Wait: Waiting, "hourglass"; defaults: default pointer; Help: Assist, with tail arrow; E-resize: Arrow toward right; Ne-resize: arrow to top right; N-resize: arrow upward; Nw-resize: arrow to the top left; W-resize: Arrow toward left; Sw-resize: Arrow downward to the left; S-resize: arrow downward; Se-resize arrow to the lower right; Auto: Automatically, the mouse in accordance with the default state according to the elements on the page to change their style.

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.