CSS Cursor

CSS cursor property is used to define the type of mouse cursor that should be displayed when hovering over an HTML element. It allows you to customize the appearance of the mouse pointer for different elements on a web page.

The CSS cursor property is used to specify the type of cursor that should be displayed when the mouse pointer is over an HTML element. The cursor property accepts a wide variety of values, including:

1. auto: The browser sets the cursor type.
2. default: The default cursor (usually an arrow).
3. pointer: The cursor is a pointing hand, indicating a link.
4. text: The cursor is a text cursor, indicating text can be selected.
5. move: The cursor is a move cursor, indicating the element can be moved.
6. wait: The cursor is a wait cursor, indicating the browser is busy.
7. help: The cursor is a help cursor, indicating the element provides help information.
8. not-allowed: The cursor is a no entry sign, indicating the element is disabled or cannot be used.

Here’s an example of using the cursor property to set the cursor to a pointer hand when the mouse is over a link:

a:hover {
   cursor: pointer;
}

<div>
  <p>In this example, the <code>cursor</code> property is set to <code>pointer</code> when the mouse pointer is over a link that is being hovered over, indicating that the link is clickable.</p>
  <p>By using the <code>cursor</code> property, you can customize the cursor for specific elements on your web page, providing visual cues to the user and improving the user experience.</p>
</div>