cursor.html 3.7 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <div>Mouse over the grey blocks to change the cursor.</div>
  2. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: auto">auto</div>
  3. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: default">default</div>
  4. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: hand">hand</div>
  5. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: pointer">pointer</div>
  6. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: text">text</div>
  7. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: help">help</div>
  8. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: crosshair">crosshair</div>
  9. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: move">move</div>
  10. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: w-resize">w</div>
  11. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: e-resize">e</div>
  12. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: n-resize">n</div>
  13. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: s-resize">s</div>
  14. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: nw-resize">nw</div>
  15. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: ne-resize">ne</div>
  16. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: sw-resize">sw</div>
  17. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: se-resize">se</div>
  18. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: ns-resize">ns</div>
  19. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: ew-resize">ew</div>
  20. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: nwse-resize">nwse</div>
  21. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: nesw-resize">nesw</div>
  22. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: col-resize">col</div>
  23. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: row-resize">row</div>
  24. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: all-scroll">allscroll</div>
  25. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: vertical-text">verticaltext</div>
  26. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: context-menu">contextmenu</div>
  27. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: no-drop">nodrop</div>
  28. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: not-allowed">notallowed</div>
  29. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: progress">progress</div>
  30. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: wait">wait</div>
  31. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: alias">alias</div>
  32. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: cell">cell</div>
  33. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: copy">copy</div>
  34. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: none">none</div>
  35. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: -webkit-zoom-in">zoom in</div>
  36. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: -webkit-zoom-out">zoom out</div>
  37. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: -webkit-grab">grab</div>
  38. <div style="width: 20px; height: 20px; margin: 10px; background: #ddd; cursor: -webkit-grabbing">grabbing</div>