cursor

Cursors are visual elements that appear over the pointer when it hovers over an element. They provide feedback to the user about the expected interaction.

Here’s a breakdown of how to use cursors in CSS:

1. Target the Element:
   • Use a CSS selector to identify the specific element you want to apply the cursor style to. This can be done by element name, class, or ID.
2. Set the cursor Property:
   • Add the cursor property to the element’s style declaration.
   • Assign a valid cursor value to the property.

Common Cursor Values

• Default: Resets the cursor to the system’s default value (usually an arrow).
• Pointer: Indicates a clickable element (often a hand).
• Crosshair: Shows a crosshair, often used for targeting or drawing.
• Move: Suggests that the element can be moved or dragged.
• Text: Displays a text selection cursor.
• Wait: Indicates a waiting or loading state (often a spinning wheel).
• Help: Shows a help symbol (usually a question mark).
• Progress: Indicates a progress bar or loading indicator.
• Cell: Represents a cell in a table.
• ContextMenu: Suggests that a context menu is available.
• Alias: Resembles a text editing cursor.
• Copy: Indicates a copy operation.
• NoDrop: Prevents dropping elements onto the target.
• NotAllowed: Prohibits a certain action (e.g., dragging).

Example

.clickable-button {
  cursor: pointer;
}

.draggable-element {
  cursor: move;
}

In this example, the element with the class clickable-button will display a pointer cursor when hovered over, indicating that it can be clicked. The element with the class draggable-element will show a move cursor, suggesting that it can be dragged.

Additional Tips

• You can combine multiple cursor values using commas to create custom effects. For example, cursor: pointer, hand; will display both a pointer and a hand cursor.
• For more advanced cursor customization, explore browser-specific cursor properties or third-party libraries.