How to Change the Mouse Cursor in CSS: Step-by-Step Guide

The Basic Syntax

.element {
  cursor: pointer;
}

The cursor property accepts a keyword value describing what the mouse pointer should look like whenever it's positioned over that element.

Step-by-Step

1. Select the element you want to change the cursor for.
2. Set the cursor property to the keyword matching the behavior you want to signal.
3. Test by hovering over the element to confirm the cursor changes as expected.

A Common Example: Making a Div Feel Clickable

.card {
  cursor: pointer;
}

A real <button> or <a> element already shows an appropriate cursor automatically. This is mainly relevant when an entire non-native element (a whole card or div) is made clickable with JavaScript — setting cursor: pointer signals to the user that the element is genuinely interactive.

Cursor Is Inherited

The cursor property is inherited by default — setting it on a parent container applies it to all children automatically, unless a specific child overrides it with its own cursor value. This makes it efficient to set a cursor once on a container rather than repeating it on every nested element.