Cursors!

With CSS3 we have way more cursors than before. This is a test to see how many cursors your current browser supports. This neat and clean design is brought to you by David Desandro (http://jsfiddle.net/user/desandro). http://jsfiddle.net/nimbu/bGxUd/

by Jens Grochtdreis

CSS

body { font-family: 'Helvetica Neue', Arial, sans-serif; }

.box {
    width: 140px;
    height: 80px;
    background: #DDD;
    float: left;
    margin: 5px;
    word-wrap: break-word;
}

.box:hover { background: #FF3 }

JavaScript

var values = "auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | flippiflop | url(http://nimbupani.com/favicon.png), auto".split(" | "),
    styles = [],
    style = document.createElement('style'),
    fragment = document.createDocumentFragment(),
    div, value;


for (var i=0, len = values.length; i < len; i++) {
  value = values[i];
  div = document.createElement('div');
  div.className = 'box box-' + i;
  div.innerText = value;
  styles.push( '.box-' + i + '{ cursor: ' + value + '; }' );
  fragment.appendChild( div );
}
    
style.innerText = styles.join(' ');
document.head.appendChild( style );
document.body.appendChild( fragment );