CSS cursor-small match Blue ideal

Source: Internet
Author: User
CSS cursor-small match Blue ideal

* Directory [1] Definition [2] standard style [3] extended style [4] private style [5] definition style [6] common applications

Previous

In a browser, the cursor is useful for providing interactive feedback. By changing the cursor in different scenarios, you can give it different meanings.

Definition

Cursor

Value :[ ,] * [Auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress] | inherit

Initial Value: auto

Apply to: All elements

Inheritance: Yes

Standard Style

CSS2 provides a relatively small selection

Url: Custom optical subject URLdefault: Default cursor, usually an arrow auto: The cursor automatically recognized by the browser crosshair: cross-line pointer: Hand pointer move: move pointer e-resize: move the pointer ne-resize to the east: Move the pointer nw-resize to the Northeast: Move the pointer n-resize to the northwest: Move the pointer se-resize to the North: Move the pointer sw-resize to the southeast: move the pointer s-resize to the southwest: Move the pointer w-resize to the south: Move the pointer text to the West: text pointer wait: indicates that the program is busy help: help pointer

Extended Style

CSS3 adds more cursor style values

[Note] All extended style IE7-not supported by browsers

cursor:none (not IE8, Safari)cursor:context-menu (not Safari,Firefox,Chrome)cursor:cell (not Safari)cursor:alias (not Safari)cursor:copy (not IE,Safari)cursor:grab (not IE,Safari,Chrome)cursor:grabbing (not IE,Safari,Chrome)cursor:zoom-in (not IE,Safari)cursor:zoom-out (not IE,Safari)cursor:vertical-textcursor:no-dropcursor:not-allowedcursor:all-scrollcursor:ew-resizecursor:ns-resizecursor:nesw-resizecursor:nwse-resizecursor:col-resizecursor:row-resize

Private Style

Some browsers also provide private styles with browser prefixes added.

[Note] safari interprets both-webkit-grab and-webkit-grabbing as default.

cursor:-webkit-grab; cursor: -moz-grab;cursor:-webkit-grabbing; cursor: -moz-grabbing;cursor:-webkit-zoom-in; cursor: -moz-zoom-in;cursor:-webkit-zoom-out; cursor: -moz-zoom-out;    

Custom Style

All browsers support files with the suffix. cur. chrome, firefox, and safari also support the use of common images to make the cursor.

[Note] when using a URL custom style, a comma and a common keyword must be followed.

// Error cursor: url ('M. cur'); // correct cursor: url ('M. cur'), auto;

Common applications

By default, the cursor of the link is the pointer of the Hand type. The changes in the cursor can give visitors a clear idea that the element is clickable.

The title attribute of an element is used to provide additional information about the element. With the help cursor, you can get better performance.

span[title]{    cursor: help;    border-bottom: 1px solid gray;}

CSS is much too interesting

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.