CSS cursor-small match Blue ideal

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