CSS - cursor


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 −

Sr.No. Value & Description
1

auto

Shape 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...

2

crosshair

A crosshair or plus sign

3

default

An arrow

4

pointer

A pointing hand (in IE 4 this value is hand)

5

move

The I bar

6

e-resize

The cursor indicates that an edge of a box is to be moved right (east)

7

ne-resize

The cursor indicates that an edge of a box is to be moved up and right (north/east)

8

nw-resize

The cursor indicates that an edge of a box is to be moved up and left (north/west)

9

n-resize

The cursor indicates that an edge of a box is to be moved up (north)

10

se-resize

The cursor indicates that an edge of a box is to be moved down and right (south/east)

11

sw-resize

The cursor indicates that an edge of a box is to be moved down and left (south/west)

12

s-resize

The cursor indicates that an edge of a box is to be moved down (south)

13

w-resize

The cursor indicates that an edge of a box is to be moved left (west)

14

text

The I bar

15

wait

An hour glass

16

help

A question mark or balloon, ideal for use over help buttons

17

<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 −

Live Demo
<html>
   <head>
   </head>

   <body>
      <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>
   </body>
</html> 

This will produce following result, try to move your mouse pointer over different properties −



Advertisements