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.

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.

CSS Cursor Examples

Code Example

Keywords: view, css, cursor, examples