Add CSS styles to the cursor in Webpage design

Source: Internet
Author: User
Tags uppercase letter

CSS allows you to control the appearance and layout of a webpage-including fonts, blank pages, and cursors. Good. From CSS 2.1, you can easily control the cursor used when users browse the web page.

The standard CSS cursor is an arrow. Generally, it can meet the needs of a webpage or website, but sometimes you may need to use other cursors. In these cases, the CSS standard provides many options.

The following table lists the CSS cursor types.

Default Cursor: use the standard arrow.

Hand-shaped cursor: the cursor is hand-shaped, and the index finger is stretched out.

Pointer-like cursor: the same as the hand-like cursor.

Cross cursor: use a cross cursor (a plus sign ).

Move the cursor: use a cross cursor, with an arrow at the end of each line. This is the same as the cursor used in Windows to move the window.

Text cursor: use an I-shaped cursor (uppercase letter I ).

Wait cursor: the cursor is an hourglass.

Help cursor: use the question mark cursor.

E-resize: The standard defines the cursor as an arrow pointing to the east, but in most browsers, the cursor is a horizontal line with arrows at both ends.

W-resize: The standard defines the cursor as an arrow pointing to the West, but in most browsers, the cursor is a horizontal line with arrows at both ends.

Ne-resize: The standard defines the cursor as an arrow pointing to the northeast, but in most browsers, the cursor is displayed as a diagonal line with arrows at both ends.

Nw-resize: The standard defines the cursor as an arrow pointing to the north-west, but in most browsers, the cursor is displayed as a diagonal line with arrows at both ends.

Se-resize: The standard defines the cursor as an arrow pointing to the south-east, but in most browsers, the cursor is displayed as a diagonal line with arrows at both ends.

S-resize: The standard defines the cursor as an arrow pointing to the south or below, but in most browsers, the cursor is displayed as a vertical line with arrows at both ends.

Sw-resize: The standard defines the cursor as an arrow pointing to the south-west, but in most browsers, the cursor is displayed as a diagonal line with arrows at both ends.

N-resize: The standard defines the cursor as an arrow pointing to the north or above, but in most browsers, the cursor is a vertical line with arrows at both ends.

Progress cursor: the cursor is an hourglass.

Prohibit cursor: the cursor is a circle with diagonal lines inside.

Do not drag the cursor: the cursor is in the hand shape, and the cursor is not allowed on the right side.

Vertical text cursor: the cursor is horizontal I-shaped.

Triangle direction cursor: the cursor is a four arrow with a dot in the middle.

Color adjusting cursor: draw a horizontal arrow on two parallel vertical lines, just like the cursor for adjusting the column size in Microsoft Excel.

Line cursor adjustment: draw a vertical arrow on two equal horizontal lines, just like the cursor for adjusting the row size in Microsoft Excel.

Url (uri): This cursor allows you to use the custom cursor defined in the external file submitted as rui.

We can use the values in the preceding table and the cursor attribute of an element. The following code shows how to use the style attribute of an HTML element.

Style = "cursor: hand;" is the same as other CSS attributes. You can define a cursor for a single element on the entire page or page. The HTML instance in List A uses A different cursor for various page elements.

<Html>

<
Related Article

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.