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