Cascading Style Sheets/Cursor

From Wikibooks, the open-content textbooks collection

Jump to: navigation, search

[edit] Cursor

CSS allows the cursor to be specified when a specific context is desired. The :hover selector does not need to be used.

cursor: cursor-name;

default The default cursor, usually an arrow.
auto Automatically determine the cursor based on the current context. Mouseover text to get an i-beam, a link to get a pointer, etc. The standard behavior.
crosshair A crosshair for precision selecting.
pointer A hand with index finger extended.
move The move cursor, usually a + with arrows on each end.
e-resize East or left resize.
ew-resize East-West or horizontal resize.
ne-resize North-East or upper right resize.
nesw-resize
nw-resize
nwse-resize
n-resize
ns-resize
se-resize
sw-resize
s-resize
w-resize
text The I-beam cursor
vertical-text A horizontal I-Beam cursor for vertical text
wait A watch or timepiece of some kind.
help Help cursor, often a question mark.
not-allowed Often a circle with a line through it
none You should not see the cursor.
alias Cursor indicating an alias, symbolic link or other file/data indirection.
no-drop
copy Cursor indicating that the dragged item may be copied. Usually an arrow cursor with a +.
context-menu Cursor indicating that there is a context menu there or the cursor is in context menu mode. Often an arrow cursor with a small representation of a context menu.
cell
col-resize
row-resize
all-scroll Cursor that indicates scrolling in any direction. Often arrows in the four cardinal directions.
progress Cursor indicating work being done in the background, the user is still able to interact with the controls. Usually an arrow cursor with a timepiece or spinner animation.
-custom-grab[1] A cursor indicating that it is ready to grab or pick up an item. Often an open hand.
-custom-grabbing[1] A cursor indicating that it has grabbed or is clasping/carrying an item. Often a fist.
-custom-zoom-in[1] A cursor indicating zooming in, often a magnifying glass with a +.
-custom-zoom-out[1] A cursor indicating zooming out, often a magnifying glass with a -.

[edit] Custom cursors

A custom cursor may be supplied by using the url() function.

cursor: url('http://example.com/mypointer.cur'), pointer;

In this example we see that there is a second value, this is a fallback value that some browsers require before they will accept the custom cursor. You can use a PNG, GIF or .cur file for your cursor, .ani files only work in Internet Explorer.

Here is a .gif example:

Try the snippet, you should see this cursor.

MediaWiki blocks custom cursors, you will need to copy the snippet here to a local file or the snippet editor to try out.

<div style="cursor: url('http://upload.wikimedia.org/wikipedia/commons/e/ed/Cursor_Windows_Vista.gif'), pointer; border: 1px solid;">
GIF cursor test.
</div>

[edit] Notes & References

  1. ↑ a b c d Substitute -webkit for WebKit based browsers like Safari or Shiira, -moz for Gecko based browsers like Firefox or Flock and -o for Presto based browsers like Opera.
Retrieved from "http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Cursor"