| Web Developer Resources | |
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
|