How to use css cursor property? CSS Tutorial 13

 

  CSS Cursor Property

1. Introduction to CSS cursor property
2. The syntax of CSS cursor property
3. Example of CSS cursor property

Introduction to CSS Cursor Property

When you move a mouse cursor to a link, you can see the hand cursor and when you move a cursor pointer on a text, the text cursor is displayed. The rest of the other HTML elements also show the arrow, move cursors, etc.

With the help of the mouse pointer, the user realizes that the element on which the cursor goes, how it behaves. For example, the user from the hand cursor knows that the text is a link which will open a new page.

CSS cursor property is very useful for making any web application interactive. CSS provides you with the ability to control the appearance of the mouse cursor. This work is done by the available cursor property in CSS.

It is defined by the CSS cursor property that when the cursor is moved to an element, which type of mouse cursor will be displayed? Cursor property can define you according to your requirement for any HTML element.

There is some cursor type in the below image which you can define in CSS.

The syntax of CSS Cursor Property

The general syntax of the CSS cursor property has been given below.

               cursor: cursor-type;

As you can see in the above syntax, the name of the CSS cursor property is given as the name of the cursor type. For this, there are many types of cursor available which can be defined as values. These are described below.

• auto - This value automatically determines which cursor to show for which element.

• default - The default cursor is used with all elements from this value.

• none - This value does not show any type of cursor.

• initial – It sets the property of the cursor to the default value.

• inherit - This value inherit the value of the cursor from the parent element.

• context-menu - This value shows the context menu cursor which indicates that the context menu is available. This value should be used for those elements whose context menu is defined.

• help - This value shows the help cursor. The help cursor lets the user know that the help associated with an element is available.

• pointer - This value shows the value of the cursor. Mostly, hand cursor is shown for links.

• progress - This value shows a progress indicator cursor. Progress indicator cursor indicates that the process is in progress. Such as loading of an element etc.

• wait - this value shows the wait cursor. Wait cursor tells the user to wait.

• cell - This value shows the cell (column) cursor. The user from the cell cursor realizes that a column can be selected.

• crosshair - this value shows a crosshair cursor.

• text - This value shows the text cursor. Text cursor indicates that text can be selected.

• url - This is used to define a custom cursor.

• vertical-text - This value shows the vertical text selector cursor. This text cursor shows the user that the vertical text can be selected.

• alias - This shows the value alias (shortcut) cursor. Alias cursor tells that an element's shortcut can be created.

• copy - This value shows the value of the copy cursor. Copy cursor lets the user know that the element can be copied.

• move - This value shows the move cursor. Move cursor lets the user know that the element can be moved.

• no-drop - This value shows no drop cursor. This cursor shows that the element can't be dropped on the current location.

• not-allowed - This value shows the not allowed cursor. No permission can be taken from the not allowed cursor, with the element of the user.

• all-scroll - This value shows all scroll cursor. All the scroll cursor lets the user know that it can be scrolled across all sides.

• col-resize - This value shows the column resize cursor. From this cursor, the user realizes that the column can be resized.

• row-resize - This shows the value row resize cursor. From this cursor, the user knows that the row can be resized.

• n-resize - This value shows the north resize cursor. The user from this cursor realizes that an element can be resized in the north.

• e-resize - This value shows the east resize cursor. The user from this cursor detects that an element can be resized in the east.

• s-resize - This value shows the south resize cursor. The user from this cursor detects that an element can be resized in the south.

• w-resize - This value shows the west resize cursor. The user from this cursor realizes that an element can be resized in the west.

• ne-resize - This value shows the north-east resize cursor. From this cursor, the user knows that the element can be moved to the north-east.

• nesw-resize - This vale shows the north-east-south-west resize cursor.

• nw-resize - This value shows north-west resize cursor. The user from this cursor knows that the element can be resized in the north-west.

• nwse-resize - This vale shows north-west-south-east resize cursor.

• se-resize - This value shows south-east resize cursor. From this cursor, the user realizes that the element can be moved to the south-east.

• sw-resize - This value shows south-west resize cursor. The user from this cursor realizes that the element can be moved to the south-west.

• ew-resize - This value shows east-west resize cursor. From this cursor, the user realizes that the element can be moved to east-west.

• ns-resize - This value shows north-south resize cursor. From this cursor, the user realizes that the element can be moved north and south.

• zoom-in - This value will show the zoom in the cursor. From the Zoom in the cursor, the user finds that the element can be zoomed in.

• zoom-out - This value shows zoom out cursor. Zoom out cursor lets the user know that the element can be zoomed out in the element.

• grab - This value shows the value grab cursor. Grab cursor lets the user know that the element can be grabbed.

• grabbing - it shows value grabbing cursor. Grabbing cursor lets the user know that the element is being grabbed.

Example of CSS Cursor Property

The example of the CSS cursor property has been given below.

<!DOCTYPE html>

<html>

<head>

  <title> Cursor Property in CSS </title>
<style type="text/css">
#Auto{
cursor: auto;
}
#Default{
cursor: default;
}
#None{
cursor: none;
}
#Initial{
cursor: initial;
}
#Inherit{
cursor: inherit;
}
#Context-menu{
cursor: context-menu;
}
#Help{
cursor: help;
}
#Pointer{
cursor: pointer;
}
#Progress{
cursor: progress;
}
#Wait{
cursor: wait;
}
#Cell{
cursor: cell;
}
#Crosshair{
cursor: crosshair;
}
#Text{
cursor: text;
}
#Url{
cursor: url(flower.cur),auto;
}
#Vertical-text{
cursor: vertical-text;
}
#Alias{
cursor: alias;
}
#Copy{
cursor: copy;
}
#Move{
cursor: move;
}
#No-drop{
cursor: no-drop;
}
#Not-allowed{
cursor: not-allowed;
}
#All-scroll{
cursor: all-scroll;
}
#Col-resize{
cursor: col-resize;
}
#Row-resize{
cursor: row-resize;
}
#N-resize{
cursor: n-resize;
}
#E-resize{
cursor: e-resize;
}
#S-resize{
cursor: s-resize;
}
#W-resize{
cursor: w-resize;
}
#NE-resize{
cursor: ne-resize;
}
#Nesw-resize{
cursor: nesw-resize;
}

#NW-resize{
cursor: nw-resize;
}
#Nwse-resize{
cursor: nwse-resize;
}
#SE-resize{
cursor: se-resize;
}
#SW-resize{
cursor: sw-resize;
}
#EW-resize{
 cursor: ew-resize; }
#NS-resize{
cursor: ns-resize;
}
#Zoom-in{
cursor: zoom-in;
}
#Zoom-out{
cursor: zoom-out;
}
#Grab{
cursor: -webkit-grab;
cursor: grab;
}
#Grabbing{
cursor: -webkit-grabbing; 
cursor: grabbing;
}
</style>
</head>
<body>
<h1>The CSS Cursor Property Example</h1>
<h3>The mouse over the text/word to change the mouse pointer.</h3>
<p id="Auto">This is "auto" value of the cursor property</p>
<p id="Default">This is "default" value of the cursor property</p>
<p id="None">This is "none" value of the cursor property</p>
<p id="Initial">This is "initial" value of the cursor property</p>
<p id="Inherit">This is "inherit" value of the cursor property</p>
<p id="Context-menu">This is "context-menu" value of the cursor property</p>
<p id="Help">This is "help" value of the cursor property</p>
<p id="Pointer">This is "pointer" value of the cursor property</p>
<p id="Progress">This is "progress" value of the cursor property</p>
<p id="Wait">This is "wait" value of the cursor property</p>
<p id="Cell">This is "cell" value of the cursor property</p>
<p id="Crosshair">This is "crosshair" value of the cursor property</p>
<p id="Text">This is "text" value of the cursor property</p>
<p id="Url">This is "url" value of the cursor property</p>
<p id="Vertical-text">This is "vertical-text" value of the cursor property</p>
<p id="Alias">This is "alias" value of the cursor property</p>
<p id="Copy">This is "copy" value of the cursor property</p>
<p id="Move">This is "move" value of the cursor property</p>
<p id="No-drop">This is "no-drop" value of the cursor property</p>
<p id="Not-allowed">This is "not-allowed" value of the cursor property</p>
<p id="All-scroll">This is "all-scroll" value of the cursor property</p>
<p id="Col-resize">This is "col-resize" value of the cursor property</p>
<p id="Row-resize">This is "row-resize" value of the cursor property</p>
<p id="N-resize">This is "n-resize" value of the cursor property</p>
<p id="E-resize">This is "e-resize" value of the cursor property</p>
<p id="S-resize">This is "s-resize" value of the cursor property</p>
<p id="W-resize">This is "w-resize" value of the cursor property</p>
<p id="NE-resize">This is "ne-resize" value of the cursor property</p>
<p id="Nesw-resize">This is "nesw-resize" value of the cursor property</p>
<p id="NW-resize">This is "nw-resize" value of the cursor property</p>
<p id="Nwse-resize">This is "nwse-resize" value of the cursor property</p>
<p id="SE-resize">This is "se-resize" value of the cursor property</p>
<p id="SW-resize">This is "sw-resize" value of the cursor property</p>
<p id="EW-resize">This is "ew-resize" value of the cursor property</p>
<p id="NS-resize">This is "ns-resize" value of the cursor property</p>
<p id="Zoom-in">This is "zoom-in" value of the cursor property</p>
<p id="Zoom-out">This is "zoom-out" value of the cursor property</p>
<p id="Grab">This is "grab" value of the cursor property</p>
<p id="Grabbing">This is "grabbing" value of the cursor property</p>

</body>

</html>

The above example will produce the below output.

        <<-- PREVIOUS                                                                 NEXT -->>