Slacker's Guide to HTML: Cursor Codes and Effects

Changing the Cursor with CSS

You can change the cursor which will be displayed when a user hovers over an object with style sheets. Check out the simple information and examples below.

In order to change the cursor being displayed on different parts of your page you have to understand the cursor style. I'll show an example of the cursor style. In this example the text enclosed in the paragraph (p) tag will have a cursor which appears as an hourglass when it hovers above the text.

<style type="text/css">
<!--
p {cursor: wait;}
-->
</style>

As I explained in A Slacker's Guide to CSS, a style tag can have many different properties and values. In this case the cursor property is given the value of wait. You can use many different HTML attribues, not just the paragraph tag, too. I can make all images appear with the crosshair cursor above them if I wanted too by using this code:

<style type=text/css>
<!--
img {cursor: crosshair}
-->
</style>

Below there is a table showing the different cursor properties and the code for them. Just plug the code (in red) into your HTML style sheets code and your off.

	This is the default setting for the cursor. If you would like to enact this, then enter: `cursor: default`.
	This creates the cursor controlled by the browser. The code is `cursor: auto`.
	This setting causes the hand (which also appears over links) to show up. Here is the code: `cursor: hand`.
	This creates the crosshair cursor, which is usually used for precise placement. The code is `cursor: crosshair`.
	This creates a cursor that resembles the one used to move objects. The code is: `cursor: move`.
	That creates a cursor that looks like the one that appears over text. The code is `cursor: text`.
	That is the hourglass cursor, which symbolizes that the computer is busy at the time. The code is `cursor: wait`.
	This is the cursor that signifies "help!". The code is `cursor: help`.
	This lets you pick which resizing cursor you want to use. Since you can resize in 8 different directions (Up, up & right, right, right & down, down, down & left, left, and left & up) there is 8 different codes for this. Each code uses a direction (North, South, North-east, etc.). If you wanted to resize up, then you would resize north. The code to resize up (North) is `cursor: n-resize` and the code for resizing South-east is `cursor: se-resize`. From those examples it is simple to figure the rest out, right?