Cursor

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;

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 ?.

Custom cursors

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

Notes & References

  1. ? abcd Substitute -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.

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.

Cascading_Style_Sheets/Cursor
 



 

Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your Digital Marketing and Technology knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us















Warning: Unknown: write failed: No space left on device (28) in Unknown on line 0

Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/tmp) in Unknown on line 0