How can I use a CSS cursor hand style to show a pointer when hovering over list items?

General Discussions
,
1

I have a list with clickable <li> elements, but the mouse shows a text cursor on hover.

How can I apply the proper CSS cursor hand style so the pointer changes to a hand, similar to how it behaves over buttons or links?

2

You just need to set cursor: pointer; on the

  • elements. That’s the CSS equivalent of the old “hand” style. Here’s how I usually do it:

    li {
  cursor: pointer;
}

    That’ll give you the hand-style pointer when hovering, just like on links and buttons.

    • 3

    Ah, I ran into this exact issue! If you’ve made your <li> tags clickable (like with JavaScript), browsers don’t automatically treat them like buttons or anchors.

    So yeah, manually add cursor: pointer; to your list item style. It’s simple but makes a huge difference for UX.