How to change cursor using CSS and HTML

How to change cursor to mouse over see below:

<h2>Mouse over the words to change the cursor.</h2>
  <li class="auto">auto</li>
  <li class="crosshair">crosshair</li>
  <li class="default">default</li>
  <li class="e-resize">e-resize</li>
  <li class="help">help</li>
  <li class="move">move</li>
  <li class="n-resize">n-resize</li>
  <li class="ne-resize">ne-resize</li>
  <li class="nw-resize">nw-resize</li>
  <li class="pointer">pointer</li>
  <li class="progress">progress</li>
  <li class="s-resize">s-resize</li>
  <li class="se-resize">se-resize</li>
  <li class="sw-resize">sw-resize</li>
  <li class="text">text</li>
  <li class="w-resize">w-resize</li>
  <li class="wait">wait</li>

Style here

.cursor {
	text-align: center;
	font-size: 18px;
.auto {
	cursor: auto;
.crosshair {
	cursor: crosshair;
.default {
	cursor: default;
.e-resize {
	cursor: e-resize;
.help {
	cursor: help;
.move {
	cursor: move;
.n-resize {
	cursor: n-resize
.ne-resize {
	cursor: ne-resize
.nw-resize {
	cursor: nw-resize
.pointer {
	cursor: pointer
.progress {
	cursor: progress
.s-resize {
	cursor: s-resize
.se-resize {
	cursor: se-resize
.sw-resize {
	cursor: sw-resize;
.text {
	cursor: text;
.w-resize {
	cursor: w-resize;
.wait {
	cursor: wait;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s