CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

CSS Cursor

It is used to define the type of mouse cursor when the mouse pointer is on the element. It allows us to specify the cursor type, which will be displayed to the user. When a user hovers on the link, then by default, the cursor transforms into the hand from a pointer.

Let's understand the property values of the cursor.

Values	Usage
alias	It is used to display the indication of the cursor of something that is to be created.
auto	It is the default property in which the browser sets the cursor.
all-scroll	It indicates the scrolling.
col-resize	Using it, the cursor will represent that the column can be horizontally resized.
cell	The cursor will represent that a cell or the collection of cells is selected.
context-menu	It indicates the availability of the context menu.
default	It indicates an arrow, which is the default cursor.
copy	It is used to indicate that something is copied.
crosshair	In it, the cursor changes to the crosshair or the plus sign.
e-resize	It represents the east direction and indicates that the edge of the box is to be shifted towards right.
ew-resize	It represents the east/west direction and indicates a bidirectional resize cursor.
n-resize	It represents the north direction that indicates that the edge of the box is to be shifted to up.
ne-resize	It represents the north/east direction and indicates that the edge of the box is to be shifted towards up and right.
move	It indicates that something is to be shifted.
help	It is in the form of a question mark or ballon, which represents that help is available.
None	It is used to indicate that no cursor is rendered for the element.
No-drop	It is used to represent that the dragged item cannot be dropped here.
s-resize	It indicates an edge box is to be moved down. It indicates the south direction.
Row-resize	It is used to indicate that the row can be vertically resized.
Se-resize	It represents the south/east direction, which indicates that an edge box is to be moved down and right.
Sw-resize	It represents south/west direction and indicates that an edge of the box is to be shifted towards down and left.
Wait	It represents an hourglass.
	It indicates the source of the cursor image file.
w-resize	It indicates the west direction and represents that the edge of the box is to be shifted left.
Zoom-in	It is used to indicate that something can be zoomed in.
Zoom-out	It is used to indicate that something can be zoomed out.

The illustration of using the above values of cursor property is given below:

Example

<html>
   <head>
   </head>
   <style>
      body{
         background-color: lightblue;
         color:green;
         text-align: center;
         font-size: 20px;
      }
    
   </style>
   
   <body>
      <p>Move your mouse over the below words for the cursor change.</p>
      <div style = "cursor:alias">alias Value</div>      
      <div style = "cursor:auto">auto Value</div>
      <div style = "cursor:all-scroll">all-scroll value</div>
      <div style = "cursor:col-resize">col-resize value</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default value</div>
      <div style = "cursor:copy">copy value</div>
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ew-resize">ew-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>
      <div style = "cursor:progress">Progress</div>
      <div style = "cursor:no-drop">no-drop</div>
      <div style = "cursor:not-allowed">not-allowed</div>
      <div style = "cursor:vertical-text">vertical-text</div>
      <div style = "cursor:zoom-in">Zoom-in</div>
      <div style = "cursor:zoom-out">Zoom-out</div>
   </body>
</html>

Test it Now

Next TopicCSS Buttons

← prev next →

Hot Tutorials

Contact US

Email:[email protected]

CSS Tutorial

CSS Properties

CSS Advance

CSS Design

CSS Questions

Miscellaneous

CSS MCQ

Interview Questions

CSS Cursor

Hot Tutorials

Contact US