Friends who often surf the Internet have ever noticed that the mouse on some websites is not in the shape of a regular diagonal upward arrow, but a cross shape, or a left arrow, or a question mark, etc. When you want the mouse to display different shapes at different locations on the web page to reflect different functional areas; when you want your website to reflect a unique style, consider working on the mouse style. In fact, mouse styles have a wide range of uses, so how can you implement different mouse styles? Start Dreamweaver, open the web page where you want to apply the mouse style, select the Text drop-down menu in the main window, and then select New in the CSS Style submenu. The Style command creates a new style sheet. (Note: If a style sheet already exists in your web page, you can select CSS Styles Edit Style Sheet to edit the style sheet.) The New Style dialog box will pop up. The Type item has three radio buttons: Make Custom Style, Redefine HTML Tag, and Use CSS Selector. Among them, Make Custom Style is a custom style, and the style name starts with a dot; Use CSS Selector is to use the CSS selector, which contains four hyperlink styles
a:active/a:hover/a:link/a:visited; Redefine HTML Tag is a style that defines HTML system tags, such as abodybr and so on. Assume that we only set the mouse style for the hyperlinks on this page. Here, select the a tag in the Redefine HTML Tag option. Select This Document Only for the Define item below. Click the OK button. The Style definition for dialog box pops up and enters the hyperlink style setting. The Category on the left is the style category. There is no explanation for other items here. We choose the Extentions item. You can see the Cursor item in the Visual Effect on the right, which is the key item for setting the mouse style. Click the drop-down menu on the right, select the mouse style you need, and click the OK button. Let’s talk about the general meaning of each style.
hand: is a familiar hand shape.
crosshair: It is a cross-shaped one, which is the style used on the homepage of Little Turtle.
text: It is the style when the mouse is moved to the text.
wait: is the effect of waiting.
default: It is the default effect.
help: is the mouse style with question mark.
e-resize: is the right arrow.
ne-resize: is the arrow pointing upward to the right.
n-resize: is an upward arrow.
nw-resize: is the arrow pointing upward to the left.
w-resize: It is an arrow pass to the left.
sw-resize: is the arrow pointing downward to the left.
s-resize: is a downward arrow.
se-resize: is the arrow pointing downward to the right.
auto: It is the automatic effect of the system.
Of course, you can also apply the style to other tags as needed, or simply apply it to a certain paragraph of text. If the reader is familiar with CSS code, it may be more convenient to write the code directly by hand. In particular, if you want to use different mouse styles for different locations, or use different mouse styles for different tabs. Just write the style directly in a specific tag.
The method is: <tag style=cursor:mouse_style>. Where tag is the tag name, mouse_style is the mouse style, such as hand/crosshair/text/wait, etc.
Let's give a specific example to deepen everyone's understanding of mouse style settings.
<span style=cursor:hand> hand: is a familiar hand shape. < /span>
< span style=cursor:crosshair>crosshair: It is a crosshair, which is the style used on the homepage of Little Turtle. < /span>
< span style=cursor:text>text: is the style in which the mouse is usually moved to the text. < /span>
< span style=cursor:wait>wait: is the effect of waiting. < /span>
< span style=cursor:default>default: is the default effect. < /span>
< span style=cursor:help>help: is a mouse style with a question mark. < /span>
< span style=cursor:e-resize>e-resize: is an arrow to the right. < /span>
< span style=cursor:ne-resize>ne-resize: is an arrow pointing upward to the right. < /span>
< span style=cursor:n-resize>n-resize: is an upward arrow. < /span>
< span style=cursor:nw-resize>nw-resize: is an arrow pointing upward to the left. < /span>
< span style=cursor:w-resize>w-resize: It is an arrow pass to the left. < /span>
< span style=cursor:sw-resize>sw-resize: is an arrow pointing downward to the left. < /span>
< span style=cursor:s-resize>s-resize: is a downward arrow. < /span>
< span style=cursor:se-resize>se-resize: is an arrow pointing downward to the right. < /span>
< span style=cursor:auto>auto: is the automatic effect of the system. </span>
Copy the above code to your web page and press F12 to preview. Move your mouse over the corresponding text and see what happens to the mouse? Does it appear in the corresponding style?