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>
<ul>
  <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>
</ul>

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;
}
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s