Categories
css hover mouse-cursor

How to change the cursor into a hand when a user hovers over a list item?

2238

I’ve got a list, and I have a click handler for its items:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer when I hover over the list items.

4

  • 65

    FYI, I retagged your question by removing “jquery” and adding “css” to more accurately reflect the nature of your question and the answer to it.

    Jun 21, 2010 at 19:52

  • 4

    A good reference list for changing the cursor to a hand and other icons available in css. javascriptkit.com/dhtmltutors/csscursors.shtml

    – Neil

    Aug 24, 2011 at 5:04

  • 3

    If there is a click handler that is added with JavaScript also the css for the mouse pointer should be added with JavaScript. So the user does not think he or she could click where it is not possible. I added an appropriate answer for this.

    – Christoph

    Mar 7, 2014 at 11:34

  • Did you try cursor: grab

    – devssh

    Nov 26, 2018 at 9:29


3658

In light of the passage of time, as people have mentioned, you can now safely just use:

li { cursor: pointer; }

6

  • 226

    It’s worth noting that just doing cursor: pointer is good enough for everything above IE 5.5: quirksmode.org/css/cursor.html

    – ripper234

    Feb 19, 2012 at 8:59

  • 23

    It’s funny how pointer!=cursor and hand!=pointer, adding even more to the confusion. 🙂

    Mar 18, 2013 at 10:06

  • 22

    Of note, quirksmode.org/css/user-interface/cursor.html#note (referenced in an earlier comment) states that hand must come after pointer. I recommend using just pointer – IE 5.5 is deader than IE 6.

    – Iiridayn

    Jul 10, 2013 at 21:31


  • 2

    @EdwardBlack it used to be required for odd browsers that weren’t standards compliant, the answer was updated long ago to reflect the new way which is simply just pointer this question is over 5 years old btw.

    – Aren

    Oct 24, 2015 at 3:11


  • Indeed. Even if you run IE in IE5 compatibility mode, cursor:pointer still works. So if there ever was an excuse to use cursor:hand, there no longer is.

    – Mr Lister

    Aug 7, 2016 at 16:38

474

Use for li:

li:hover {
    cursor: pointer;
}

See more cursor properties with examples after running snippet option:

An animation showing a cursor hovering over a div of each class

.auto          { cursor: auto; }
.default       { cursor: default; }
.none          { cursor: none; }
.context-menu  { cursor: context-menu; }
.help          { cursor: help; }
.pointer       { cursor: pointer; }
.progress      { cursor: progress; }
.wait          { cursor: wait; }
.cell          { cursor: cell; }
.crosshair     { cursor: crosshair; }
.text          { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias         { cursor: alias; }
.copy          { cursor: copy; }
.move          { cursor: move; }
.no-drop       { cursor: no-drop; }
.not-allowed   { cursor: not-allowed; }
.all-scroll    { cursor: all-scroll; }
.col-resize    { cursor: col-resize; }
.row-resize    { cursor: row-resize; }
.n-resize      { cursor: n-resize; }
.e-resize      { cursor: e-resize; }
.s-resize      { cursor: s-resize; }
.w-resize      { cursor: w-resize; }
.ns-resize     { cursor: ns-resize; }
.ew-resize     { cursor: ew-resize; }
.ne-resize     { cursor: ne-resize; }
.nw-resize     { cursor: nw-resize; }
.se-resize     { cursor: se-resize; }
.sw-resize     { cursor: sw-resize; }
.nesw-resize   { cursor: nesw-resize; }
.nwse-resize   { cursor: nwse-resize; }

.cursors > div {
    float: left;
    box-sizing: border-box;
    background: #f2f2f2;
    border:1px solid #ccc;
    width: 20%;
    padding: 10px 2px;
    text-align: center;
    white-space: nowrap;
    &:nth-child(even) {
       background: #eee;
    }
    &:hover {
       opacity: 0.25
    }
}
<h1>Example of cursor</h1>

<div class="cursors">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>

5

  • 1

    Off topic, Using which software you did that gif animation? [email protected] Khalse

    – fWd82

    Dec 21, 2017 at 12:57

  • 4

    @fWd82 check ShareX – record a gif

    – Hidden

    May 28, 2018 at 9:50

  • I felt this was a useful reminder of cursors and added the code as a tool. Here’s a link to the code above: spragucm.com/web-css-cursor-pointers

    Feb 5, 2019 at 11:49

  • 1

    Awesome animation! @fWd82 – Peek is also good for recording gifs of an area of your screen. github.com/phw/peek

    Apr 24, 2019 at 14:40


  • 3

    very detailed and well explained.

    Jul 15, 2021 at 10:05

181

You do not require jQuery for this, simply use the following CSS content:

li {cursor: pointer}

And voilà! Handy.

1

  • 5

    Handy? Hmm…I see what you did there, @denis-alpheus-cahuk

    – osiris

    Oct 7, 2019 at 11:52