Advertisement
Web Developer Resources
You Are Here: ESQSoft.com ¬ css-help ¬ CSS Cursor Examples
E.S.Q. Software Logo

CSS Cursor Examples

CSS cursors help convey what sections of a web page do by replacing the mouse pointer with an informational icon to provide a visual hint about what user-interaction happens there. Here's a quick example of what affect setting various CSS cursor styles on HTML elements in a page has. Mouse over a box below to see the CSS cursor applied. Try in different browsers to see how it's supported across clients. The code to produce the effect appears below the example.

alias
all-scroll
auto
cell
context-menu
col-resize
copy
crosshair
default
e-resize
ew-resize
help
move
n-resize
ne-resize
nesw-resize
ns-resize
nw-resize
nwse-resize
no-drop
none
not-allowed
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
vertical-text
w-resize
wait
zoom-in
zoom-out

Code Example

Here is the JavaScript code used to build the CSS cursor example HTML. It iterates over a list of the css cursor properties I know of currently, and builds a string of HTML DIVs with the cursor property set to that iteration. Once the string of HTML is ready, it's instantiated on the DOM by replacing the innerHTML of a DIV I added to the source code of this page with the string.

Keywords: view, css, cursor, examples

Advertisement
Advertisement
Statcounter