CSS Cursor Practice Questions with Solutions

By /

Introduction

The CSS cursor property controls the type of mouse pointer displayed when a user moves the pointer over an HTML element. Different cursor styles can communicate whether an element is clickable, draggable, unavailable, resizable, or interactive. Common values include pointer, default, text, not-allowed, wait, and grab. In this chapter, you’ll practice the CSS cursor practice questions property through simple solved questions that are useful for creating clear and user-friendly interfaces. CSS Cursor practice questions with solutions help to build concepts.

Question 1: Change the Cursor to Pointer

Problem Statement

Write CSS to display a pointer cursor when the user moves the mouse over a button.

CSS Code

button {
    cursor: pointer;
}

Output

The mouse pointer changes to a hand-shaped pointer when hovering over the button.

Explanation

  • cursor controls the mouse pointer style.
  • pointer indicates that an element is clickable.
  • It is commonly used for buttons and links.

Question 2: Use the Default Cursor

Problem Statement

Write CSS to use the browser’s default cursor for a <div>.

CSS Code

div {
    cursor: default;
}

Output

The element uses the browser’s default cursor.

Explanation

  • default displays the standard default cursor.
  • It is useful when you want to explicitly reset the cursor style.

Question 3: Display a Text Cursor

Problem Statement

Write CSS to display a text-selection cursor when the user hovers over a paragraph.

CSS Code

p {
    cursor: text;
}

Output

The cursor changes to a text-selection style over the paragraph.

Explanation

  • text indicates that the content can be selected as text.
  • It is commonly associated with editable or selectable text.

Question 4: Show a Not-Allowed Cursor

Problem Statement

Write CSS to indicate that an action is not allowed.

CSS Code

.disabled-button {
    cursor: not-allowed;
}

Output

The cursor changes to a not-allowed symbol when hovering over the element.

Explanation

  • not-allowed visually indicates that the requested action is unavailable.
  • It is useful for disabled-looking controls.
  • Remember that changing the cursor alone does not actually disable an HTML button.

Question 5: Show a Wait Cursor

Problem Statement

Write CSS to display a wait cursor while hovering over a loading element.

CSS Code

.loading {
    cursor: wait;
}

Output

The cursor changes to a wait indicator.

Explanation

  • wait communicates that the user may need to wait.
  • It can be used for loading or processing interfaces.
  • The CSS cursor does not itself create a loading process.

Question 6: Use the grab Cursor

Problem Statement

Write CSS to display a grab cursor when the user hovers over a draggable card.

CSS Code

.card {
    cursor: grab;
}

Output

The cursor changes to a grab hand, indicating that the element can potentially be dragged.

Explanation

  • grab provides a visual cue for draggable content.
  • It is commonly used for sliders, cards, and drag-and-drop interfaces.
  • The cursor alone does not implement dragging functionality.

Question 7: Use the grabbing Cursor

Problem Statement

Write CSS to display a grabbing cursor while a user is actively dragging an element.

CSS Code

.card:active {
    cursor: grabbing;
}

Output

When the user actively presses the card, the cursor changes to a grabbing hand.

Explanation

  • :active applies styles while the element is being activated by the user.
  • grabbing communicates an active drag-like interaction.
  • JavaScript or another interaction mechanism may still be required to implement actual dragging.

Question 8: Create a Resize Cursor

Problem Statement

Write CSS to show a horizontal resize cursor over a resizable panel.

CSS Code

.panel {
    cursor: ew-resize;
}

Output

The cursor displays a horizontal resize indicator.

Explanation

  • ew-resize indicates that an element can be resized horizontally.
  • It communicates possible movement along the horizontal axis.
  • The cursor does not automatically make an element resizable.

Question 9: Use help and zoom-in Cursors

Problem Statement

Write CSS to display a help cursor over an information icon and a zoom-in cursor over an image.

CSS Code

.info-icon {
    cursor: help;
}

.image {
    cursor: zoom-in;
}

Output

  • The information icon displays a help cursor.
  • The image displays a zoom-in cursor.

Explanation

  • help indicates that additional information may be available.
  • zoom-in suggests that the user can enlarge or inspect the image.
  • These cursor styles provide visual interaction cues.

Question 10: Create a Custom Cursor

Problem Statement

Write CSS to use a custom cursor image for a <div>.

CSS Code

.custom-cursor {
    cursor: url("cursor.png"), auto;
}

Output

The specified cursor image is used when the pointer is over the element. If the custom cursor cannot be used, the browser falls back to auto.

Explanation

  • url() specifies the custom cursor image.
  • auto provides a fallback cursor.
  • The cursor image should be designed at an appropriate size for practical use.

Key Takeaways

  • The CSS cursor property changes the mouse pointer appearance.
  • pointer is commonly used for clickable elements.
  • text displays a text-selection cursor.
  • not-allowed communicates that an action is unavailable.
  • wait indicates that the user may need to wait.
  • grab and grabbing provide visual cues for drag interactions.
  • Resize cursors such as ew-resize communicate possible resizing directions.
  • help and zoom-in provide additional interaction cues.
  • Custom cursors can be created using url().
  • Changing the cursor does not automatically add functionality to an element.

Frequently Asked Questions (FAQs)

1. What is the CSS cursor property?

The cursor property controls the type of mouse pointer displayed when the pointer is positioned over an element.

Example:

button {
    cursor: pointer;
}

2. Which cursor is commonly used for clickable elements?

The pointer value is commonly used to indicate that an element is clickable.

button {
    cursor: pointer;
}

3. What does cursor: not-allowed mean?

It visually indicates that an action is unavailable or not permitted.

4. Does cursor: grabbing make an element draggable?

No. It only changes the appearance of the cursor. Actual dragging behavior requires appropriate functionality.

5. How do I create a custom cursor?

Use the url() function with a cursor image and provide a fallback.

div {
    cursor: url("cursor.png"), auto;
}

6. What is the difference between grab and grabbing?

  • grab suggests that an element can be grabbed.
  • grabbing indicates an active grabbing interaction.

7. Can the cursor property be used on images?

Yes. You can apply different cursor styles to images.

Example:

img {
    cursor: zoom-in;
}

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top