Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - cursor


previous next AddThis Social Bookmark Button


Advertisements

Description:

The curosr property is used in audio devices to play a sound after an element.

Possible Values:

The table that follows shows possible values for the cursor property:

ValueDescription
autoShape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on...
crosshairA crosshair or plus sign
defaultAn arrow
pointerA pointing hand (in IE 4 this value is hand)
moveThe I bar
e-resizeThe cursor indicates that an edge of a box is to be moved right (east)
ne-resizeThe cursor indicates that an edge of a box is to be moved up and right (north/east)
nw-resizeThe cursor indicates that an edge of a box is to be moved up and left (north/west)
n-resizeThe cursor indicates that an edge of a box is to be moved up (north)
se-resizeThe cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resizeThe cursor indicates that an edge of a box is to be moved down and left (south/west)
s-resizeThe cursor indicates that an edge of a box is to be moved down (south)
w-resizeThe cursor indicates that an edge of a box is to be moved left (west)
textThe I bar
waitAn hour glass
helpA question mark or balloon, ideal for use over help buttons
<url>The source of a cursor image file

NOTE: You should try to use only these values to add helpful information for users, and in places they would expect to see that cursor. For example, using the crosshair when someone hovers over a link can confuse visitors.

Applies to:

All the HTML elements.

DOM Syntax:

object.style.cueAfter=url("music.wav");

Example:

Here is the example:

<p>Move the mouse over the words to see the cursor change:</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>

<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>

<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>

<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>

This will produce following result, try to move your mouse pointer over different proprties:

Move the mouse over the words to see the cursor change:

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements