Use DreamweaverMX to create webpage mouse styles

Source: Internet
Author: User
Tags tag name
Have you ever noticed that the mouse of some websites is not in the oblique and upward arrow shape, but in a cross shape, or an arrow to the left, or a question mark. When you want to display different shapes with the mouse at different locations on a webpage to reflect different functional areas, and when you want your website to show a distinctive style, let's take a look at the mouse style.
In fact, the mouse style is still widely used. How can we achieve different mouse styles? Start Dreamweaver, open the webpage that you want to apply the mouse Style to, select the Text drop-down menu in the main window, and then select the New Style command in the CSS Style submenu to create a Style sheet. (Note: If a Style Sheet already exists on your webpage, you can select CSS Styles Edit Style Sheet to Edit the Style Sheet .) The New Style dialog box is displayed. The Type item has three radio buttons: Make M Style, Redefine HTML Tag, and Use CSS Selector.
Make M Style is a Custom Style with the Style name starting with a dot. Use CSS Selector uses the CSS Selector, which contains four hyperlink styles a: active/a: hover/: link/a: visited; Redefine HTML Tag is the style that defines HTML system tags, such as abodybr. Suppose we only set the mouse style for the hyperlink of the page. Here we select the Tag in the Redefine HTML Tag option. Select This Document Only for the following Define items. Click OK.
The Style definition for dialog box is displayed. The hyperlink Style settings are displayed. The Category on the left is the style Category. Here we do not explain other items. We select Extentions items. You can see the Cursor item in Visual Effect on the right. This is the key to setting the mouse style. Click the drop-down menu on the right, select the desired mouse style, and click OK. The following describes the general meaning of each style.

Hand: it is a familiar hand model.
Crosshair: it is a cross shape, which is the style used by the home page of the turtle.
Text: the style in which the mouse moves to text.
Wait: The effect of waiting.
Default: the default effect.
Help: it is a mouse style with question marks.
E-resize: the right arrow.
Ne-resize: the arrow in the upper right corner.
N-resize: the up arrow.
Nw-resize: the arrow to the top left.
W-resize: the arrow to the left.
Sw-resize: the arrow down to the left.
S-resize: the downward arrow.
Se-resize: the arrow to the bottom right.
Auto: The result of system automation.

Of course, you can also apply styles to other labels as needed, or simply apply styles to a certain text segment. If you are familiar with CSS code, it may be easier to write code directly. In particular, if you want to apply different mouse styles at different locations or use different mouse styles for different labels. You can simply write the style in a specific label.

The method is: <tag style = cursor: mouse_style>. Tag is the tag name, and mouse_style is the mouse style, such as hand/crosshair/text/wait.

The following is an example to help you better understand mouse style settings.

Hand: it is a familiar hand model. </Span>

<Span style = cursor: crosshair> crosshair: it is a cross shape, that is, the style used on the home page of the turtle. </Span>

<Span style = cursor: text> text: the style in which the mouse moves to text. </Span>

<Span style = cursor: wait> wait: the effect of waiting. </Span>

<Span style = cursor: default> default: the default effect. </Span>

<Span style = cursor: help> help: a mouse style with question marks. </Span>

<Span style = cursor: e-resize> e-resize: the right arrow. </Span>

<Span style = cursor: ne-resize> ne-resize: the arrow in the upper right corner. </Span>

<Span style = cursor: n-resize> n-resize: the up arrow. </Span>

<Span style = cursor: nw-resize> nw-resize: the arrow in the upper left corner. </Span>

<Span style = cursor: w-resize> w-resize: the arrow to the left. </Span>

<

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.