Question
I have an HTML list, and each list item has a click handler:
<ul>
<li>foo</li>
<li>goo</li>
</ul>
How can I change the mouse cursor to a hand pointer when a user hovers over the list items, similar to how it behaves over a button or link? Currently, the cursor becomes a text-selection cursor when hovering over the <li> elements.
Short Answer
By the end of this page, you will understand how to use the CSS cursor property to change the mouse pointer on hover, especially for clickable elements like list items. You will also learn when this is appropriate, how developers usually style interactive elements, and common mistakes to avoid.
Concept
The main concept behind this question is the CSS cursor property.
When a user moves their mouse over an element, the browser decides which cursor to show. For normal text content, the cursor is often the text-selection cursor. For interactive elements such as links and buttons, browsers usually show a hand pointer automatically.
If you make a non-interactive element like <li> clickable with JavaScript, the browser does not automatically know it should look interactive. You must tell the browser by applying CSS such as:
cursor: pointer;
This matters because visual feedback is an important part of usability. If an element can be clicked, users should be able to recognize that quickly. A pointer cursor is one common signal.
That said, styling alone does not make an element accessible or semantic. If a list item behaves like a button, it may be better in some cases to place a real <button> or <a> inside the list item, depending on the purpose.
Mental Model
Think of the cursor as a sign the browser shows the user.
- A text cursor says: "You can select or edit text here."
- A pointer cursor says: "This thing is clickable."
- A disabled cursor says: "You cannot interact with this right now."
So if you turn a plain <li> into something clickable, you should also change the sign so the user gets the right message.
Syntax and Examples
The basic syntax is:
selector {
cursor: pointer;
}
For your list items, you can write:
<ul>
<li>foo</li>
<li>goo</li>
</ul>
li {
cursor: pointer;
}
Now, when the user hovers over any <li>, the cursor becomes a hand pointer.
More specific example
If only one list should behave this way, use a class:
<ul class="clickable-list">
<li>foo</li>
<li>goo</li>
</ul>
{
: pointer;
}
Step by Step Execution
Consider this example:
<ul class="clickable-list">
<li>foo</li>
<li>goo</li>
</ul>
.clickable-list li {
cursor: pointer;
}
What happens step by step
- The browser loads the HTML and creates two list item elements.
- It reads the CSS rule
.clickable-list li. - That rule matches every
<li>inside an element with classclickable-list. - The browser applies
cursor: pointerto those matching<li>elements. - When the mouse moves over one of those items, the browser checks the computed style.
- Since the cursor value is
pointer, it displays the hand pointer instead of the text-selection cursor.
Traceable example with hover
Home
Profile
Real World Use Cases
The cursor property is commonly used in many practical situations:
- Clickable navigation menus: list items or wrappers used in custom menus
- Custom dropdowns: options that act like interactive controls
- Cards and panels: a whole card may be clickable
- Table rows: clickable rows in admin dashboards
- Sortable lists: items that can be clicked, dragged, or selected
- Single-page apps: JavaScript-driven UI elements that are not traditional links
Example:
.table-row-clickable {
cursor: pointer;
}
This helps users quickly understand that the row is interactive.
Real Codebase Usage
In real projects, developers usually do more than just apply cursor: pointer.
Common patterns
-
Scope styles carefully
- Prefer
.menu-itemor.clickable-list liinstead of styling alllielements.
- Prefer
-
Combine visual cues
- Add hover styles such as background changes.
.clickable-list li {
cursor: pointer;
}
.clickable-list li:hover {
background-color: #f2f2f2;
}
-
Use semantic elements when possible
- If something performs an action, a
<button>is often better. - If something navigates somewhere, an
<a>is often better.
- If something performs an action, a
-
Add keyboard support
- Clickable non-button elements often need extra handling for accessibility.
Common Mistakes
1. Styling every list item globally
Broken approach:
li {
cursor: pointer;
}
This may affect lists that are not clickable.
Better:
.clickable-list li {
cursor: pointer;
}
2. Thinking cursor: pointer makes an element clickable
This only changes appearance. It does not add behavior.
li {
cursor: pointer;
}
Without JavaScript or a semantic element like <button> or <a>, nothing happens on click.
3. Using a non-semantic element for actions without accessibility support
A plain <li> is not a button by default. If it performs an action, users navigating by keyboard or assistive technology may have trouble.
Better pattern:
<ul>
<li>foo
goo
Comparisons
| Approach | What it does | Best use case | Notes |
|---|---|---|---|
cursor: pointer on <li> | Shows hand pointer on hover | Quick styling for clickable list items | Visual only |
<button> inside <li> | Creates a real interactive control | Actions like select, delete, submit | Better semantics and accessibility |
<a> inside <li> | Creates a real link | Navigation to another page or route | Browser shows pointer automatically |
cursor: text | Shows text-selection cursor | Editable or selectable text areas |
Cheat Sheet
/* Basic syntax */
selector {
cursor: pointer;
}
Common usage
li {
cursor: pointer;
}
Better scoped:
.clickable-list li {
cursor: pointer;
}
Useful cursor values
pointer— clickable hand cursordefault— normal arrow cursortext— text-selection cursornot-allowed— disabled cursormove— move/drag cursor
Key rules
cursor: pointeronly changes appearance.- It does not add click behavior.
- Use semantic elements like
<button>and<a>when possible. - Scope the style so non-clickable lists are not affected.
Good pattern
FAQ
How do I make the cursor a hand in CSS?
Use:
cursor: pointer;
Why does my list item show the text cursor instead of a hand?
Because <li> is not automatically treated as an interactive element by the browser.
Does cursor: pointer make an element clickable?
No. It only changes the cursor's appearance. You still need JavaScript, a link, or a button for actual interaction.
Should I use cursor: pointer on all list items?
Usually no. Only use it on list items that are actually interactive.
Is it better to use a button inside the list item?
Yes, if the item performs an action. A real <button> is more semantic and accessible.
Do links need cursor: pointer?
Usually not. Browsers already show a pointer for <a> elements with an href.
Can I change the cursor only on hover?
Yes, although it is often unnecessary because cursor naturally applies when hovered:
{
: pointer;
}
Mini Project
Description
Build a small clickable menu using a list. Each item should look interactive when hovered, and clicking an item should display which option was selected. This demonstrates how CSS cursor styling and JavaScript click handling work together in a realistic UI pattern.
Goal
Create a list-based menu where each item shows a pointer cursor on hover and updates a message when clicked.
Requirements
- Create an unordered list with at least three items.
- Make the list items show a pointer cursor when hovered.
- Add a click handler to each item.
- Display the clicked item's text below the list.
- Add a simple hover style so users can see which item they are over.
Keep learning
Related questions
CSS Font Scaling Relative to Container Size: %, em, rem, vw, and Responsive Text
Learn how CSS font scaling really works and how to make text responsive using %, em, rem, vw, clamp(), and media queries.
CSS Parent Selector Explained: Selecting a Parent <li> from an <a>
Learn whether CSS has a parent selector, how :has() works, and practical alternatives for styling a parent li from a child anchor.
CSS Previous Sibling Selector: What Exists and How to Work Around It
Learn whether CSS has a previous sibling selector, why it does not, and practical ways to style earlier elements using CSS alternatives.