English 中文(简体)
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

Selected Reading

CSS - Cursors
  • 时间：2024-11-03

CSS - Cursors

Previous Page Next Page  

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.

One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a pnk, the cursor changes from a pointer to a hand. However, it does not change form for a submit button on a form. Therefore, whenever someone hovers over an image that is a submit button, it provides a visual clue that the image is cpckable.

The following table shows the 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 pnk, 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 pnk can confuse visitors.

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <span style = "cursor:auto">Auto</span>
      <span style = "cursor:crosshair">Crosshair</span>
      <span style = "cursor:default">Default</span>
      
      <span style = "cursor:pointer">Pointer</span>
      <span style = "cursor:move">Move</span>
      <span style = "cursor:e-resize">e-resize</span>
      <span style = "cursor:ne-resize">ne-resize</span>
      <span style = "cursor:nw-resize">nw-resize</span>
      
      <span style = "cursor:n-resize">n-resize</span>
      <span style = "cursor:se-resize">se-resize</span>
      <span style = "cursor:sw-resize">sw-resize</span>
      <span style = "cursor:s-resize">s-resize</span>
      <span style = "cursor:w-resize">w-resize</span>
      
      <span style = "cursor:text">text</span>
      <span style = "cursor:wait">wait</span>
      <span style = "cursor:help">help</span>
   </body>
</html>

It will produce the following result −