CSS Cursors

css

In CSS, the cursor property is used to specify the type of cursor to be displayed when the mouse pointer is over an element.

There are several values that you can use with the cursor property, including:

  • auto: The default cursor. The browser will determine the appropriate cursor to display based on the context of the element.
  • default: The default cursor.
  • pointer: A pointing hand cursor. This is typically used for links or elements that are clickable.
  • move: A move cursor. This is typically used for elements that are draggable.
  • text: An I-beam cursor. This is typically used for text input fields or elements with editable text.
  • wait: An hourglass or watch cursor. This is typically used to indicate that an action is in progress or that the page is loading.

Here’s an example of how you might use the cursor property:

a {
    cursor: pointer;
}

This would change the cursor to a pointing hand cursor when the mouse pointer is over a link.

You can also use the cursor property with a custom image. For example:

.my-element {
    cursor: url(images/custom-cursor.png), auto;
}

This would change the cursor to the image custom-cursor.png when the mouse pointer is over the element with the class my-element. If the image is not available or if the browser does not support custom cursors, the cursor will fall back to the default cursor (auto).