From Wikibooks, open books for an open world
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;
General purpose cursors 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. default The default cursor, usually an arrow. none You should not see the cursor. Links and status cursors 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. help Help cursor, often a question mark. pointer A hand with index finger extended. 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. wait A watch or timepiece of some kind. Selection cursors cell For selecting a cell or cells in a table, spreadsheet. A thick plus with often with a dot in the center. crosshair A crosshair for precision selecting. text The I-beam cursor vertical-text A horizontal I-Beam cursor for vertical text Drag and drop cursors alias Cursor indicating an alias, symbolic link or other file/data indirection. Often a curved arrow. copy Cursor indicating that the dragged item may be copied. Usually an arrow cursor with a +. move The move cursor, usually a + with arrows on each end. no-drop not-allowed Often a circle with a line through it Resizing and scrolling cursors e-resize East or right resize. ew-resize East-West or horizontal resize. ne-resize North-East or upper right resize. nesw-resize North-East-South-West or diagonal resize. nw-resize North-West or upper left resize. nwse-resize North-West-South-East or diagonal resize. n-resize North or top resize. ns-resize North-south or vertical resize. se-resize South-East or bottom right resize. sw-resize s-resize South or bottom resize. w-resize West or left resize. col-resize Column resize. row-resize Row resize. all-scroll Cursor that indicates scrolling in any direction. Often arrows in the four cardinal directions. Vendor cursors -vendor-grab[1] A cursor indicating that it is ready to grab or pick up an item. Often an open hand. -vendor-grabbing[1] A cursor indicating that it has grabbed or is clasping/carrying an item. Often a fist. -vendor-zoom-in[1] A cursor indicating zooming in, often a magnifying glass with a ⊕. -vendor-zoom-out[1] A cursor indicating zooming out, often a magnifying glass with a ⊖.A custom cursor may be supplied by using the url() function and optionally supplying a coordinate for the hotspot if the file does not specify one.
cursor: url('http://example.com/mypointer.cur'), pointer;
or
cursor: url('http://example.com/mypointer.cur'), url('http://example.com/mypointer.png') 2 2, 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, SVG 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.<div style="cursor: url('http://upload.wikimedia.org/wikipedia/commons/d/d9/Cursor_forgetful.gif') 17 7, pointer; border: 1px solid;">
GIF cursor test.
</div>
GIF cursor test
-webkit- for WebKit based browsers like Safari or Shiira, -moz- for Gecko based browsers like Firefox or Flock, -o- for Presto based browsers like Opera and -ms- for Internet Explorer.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4