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

Question

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.

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. — Christopher Parker, Jun 21 '10 at 19:52
A good reference list for changing the cursor to a hand and other icons available in css. http://www.javascriptkit.com/dhtmltutors/csscursors.shtml — Neil, Aug 24 '11 at 05:04
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](http://stackoverflow.com/a/22127656/696973) for this. — Christoph, Mar 07 '14 at 11:34

score 3777 · Accepted Answer · edited Apr 18 '20 at 18:30

3777

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

li { cursor: pointer; }

edited Apr 18 '20 at 18:30

johannchopin

13,720
10
55
101

answered Jun 21 '10 at 19:50

Aren

54,668
9
68
101

228

It's worth noting that just doing `cursor: pointer` is good enough for everything above IE 5.5: http://www.quirksmode.org/css/cursor.html – ripper234 Feb 19 '12 at 08:59
24

It's funny how pointer!=cursor and hand!=pointer, adding even more to the confusion. :) – Henrik Erlandsson Mar 18 '13 at 10:06
22

Of note, http://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 '13 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 '15 at 03: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 07 '16 at 16:38
And according to CSS 3.0 Validation "cursor:hand" is not a valid value for cursor. We should use just cursor:pointer – Mikel Oct 18 '17 at 10:47
Just use this in whatever HTML element you want the cursor pointer on hover – Mar 09 '23 at 11:58

score 521 · Answer 2 · edited May 21 '19 at 14:30

Use for li:

li:hover {
    cursor: pointer;
}

See more cursor properties with examples after running snippet option:

.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>

Off topic, Using which software you did that gif animation? Waiting..@Santosh Khalse — fWd82, Dec 21 '17 at 12:57
I felt this was a useful reminder of cursors and added the code as a tool. Here's a link to the code above: http://spragucm.com/web-css-cursor-pointers/ — Chris Sprague, Feb 05 '19 at 11:49
Awesome animation! @fWd82 - Peek is also good for recording gifs of an area of your screen. https://github.com/phw/peek — Autumn Leonard, Apr 24 '19 at 14:40

score 187 · Answer 3 · edited Apr 14 '19 at 21:21

187

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

li {cursor: pointer}

And voilà! Handy.

edited Apr 14 '19 at 21:21

Peter Mortensen

30,738
21
105
131

answered Jun 21 '10 at 19:47

Denis 'Alpheus' Cahuk

4,152
2
23
31

score 85 · Answer 4 · edited Apr 14 '19 at 21:22

85

Use:

li:hover {
    cursor: pointer;
}

Other valid values (which hand is not) for the current HTML specification can be viewed here.

edited Apr 14 '19 at 21:22

Peter Mortensen

30,738
21
105
131

answered Jan 07 '13 at 11:50

Alastair

6,837
4
35
29

18

I don't understand what the use of the `:hover` pseudo class is in this case. Is there any advantage for specifying a different cursor when the mouse does *not* hover the element? Also I read that `li:hover` does not work in IE6. – Robert Jun 24 '14 at 18:19
1

I suppose `:hover` is just for specificity, @Robert. I can't test for support in any version of MSIE, sorry, but it wouldn't surprise me if it didn't work! :P – Alastair Jun 24 '14 at 19:33
why is `hand` in the top answer, even though it is not working? – Black Oct 20 '15 at 11:38
1

@EdwardBlack `cursor: hand` is deprecated and not in the css spec. it's like from ie5-6 era. use only `pointer`. – northamerican May 05 '16 at 20:39

score 52 · Answer 5 · edited Apr 14 '19 at 21:21

52

Use

cursor: pointer;
cursor: hand;

if you want to have a crossbrowser result!

edited Apr 14 '19 at 21:21

Peter Mortensen

30,738
21
105
131

answered Oct 27 '11 at 07:34

12

This is 2018, and cursor:hand is no longer needed for cross-browser development right? – Arka Mallick May 14 '18 at 12:45
@Haramoz - yeah, `cursor: hand` is largely obsolete, now. Hasn't been around since IE 5.5. – vapcguy May 27 '22 at 02:02
It will generate error in css validator – Patryk Chowratowicz 'Zszywacz' Jul 14 '23 at 16:25

score 48 · Answer 6 · edited Jul 05 '17 at 11:21

CSS:

.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; }

You can also have the cursor be an image:

.img-cur {
   cursor: url(images/cursor.png), auto;
}

this maybe not the direct answer to the question but this is a very good guideline. thanks by the way! — chitcharonko, Mar 04 '15 at 02:26

score 24 · Answer 7 · edited Jul 30 '19 at 13:12

I think it would be smart to only show the hand/pointer cursor when JavaScript is available. So people will not have the feeling they can click on something that is not clickable.

To achieve that you could use the JavaScript libary jQuery to add the CSS to the element like so

$("li").css({"cursor":"pointer"});

Or chain it directly to the click handler.

Or when modernizer in combination with <html class="no-js"> is used, the CSS would look like this:

.js li { cursor: pointer; }

score 23 · Answer 8 · answered Jun 05 '13 at 21:52

23

li:hover {cursor: hand; cursor: pointer;}

answered Jun 05 '13 at 21:52

Xedret

1,823
18
25

score 22 · Answer 9 · edited Apr 14 '19 at 21:22

22

For complete cross browser, use:

cursor: pointer;
cursor: hand;

edited Apr 14 '19 at 21:22

Peter Mortensen

30,738
21
105
131

answered Dec 05 '12 at 19:46

Erich Toven

237
2
2

score 22 · Answer 10 · edited Apr 14 '19 at 21:29

22

Just for completeness:

cursor: -webkit-grab;

It also gives a hand, the one you know when moving the view of an image around.

It is quite useful if you want to emulate grab behavior using jQuery and mousedown.

edited Apr 14 '19 at 21:29

Peter Mortensen

30,738
21
105
131

answered Aug 18 '16 at 15:19

Avatar

14,622
9
119
198

score 20 · Answer 11 · answered Jul 21 '21 at 09:33

20

You can change it either on hover or just specify cursor:pointer on list item, both will work.

ul li {
  cursor: pointer;
}

Alternatively

ul li:hover {
  cursor: pointer;
}

answered Jul 21 '21 at 09:33

Ismoil Shokirov

2,213
2
16
32

score 17 · Answer 12 · answered Nov 25 '21 at 08:23

17

Simply put this code.

li{cursor: pointer;}

answered Nov 25 '21 at 08:23

Feroz

511
3
11

vapcguy · Answer 13 · 2019-04-15T19:44:05.160

For being able to make anything get the "mousechange" treatment, you can add a CSS class:

.mousechange:hover {
  cursor: pointer;
}

<span class="mousechange">Some text here</span>

I would not say to use cursor:hand since it was only valid for Internet Explorer 5.5 and below, and Internet Explorer 6 came with Windows XP (2002). People will only get the hint to upgrade when their browser stops working for them. Additionally, in Visual Studio, it will red underline that entry. It tells me:

Validation (CSS 3.0): "hand" is not a valid value for the "cursor" property

Alireza · Answer 14 · 2018-04-25T05:14:37.433

Simply just do something like this:

li { 
  cursor: pointer;
}

I apply it on your code to see how it works:

li {
  cursor: pointer;
}

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

Note: Also DO not forget you can have any hand cursor with customised cursor, you can create fav hand icon like this one for example:

div {
  display: block;
  width: 400px;
  height: 400px;
  background: red;
  cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;
}

<div>
</div>

score 13 · Answer 15 · answered Dec 21 '14 at 18:34

13

ul li:hover{
   cursor: pointer;
}

answered Dec 21 '14 at 18:34

user3776645

397
3
5

score 11 · Answer 16 · answered Feb 27 '16 at 05:25

All of the other responses suggest using the standard CSS pointer, however, there are two methods:

Apply the CSS property cursor:pointer; to the elements. (This is the default style when a cursor hovers over a button.)
Apply the CSS property cursor:url(pointer.png); using a custom graphic for your pointer. This may be more desirable if you want to ensure that the user experience is identical on all platforms (instead of allowing the browser/OS decide what your pointer cursor should look like). Note that fallback options may be added in case the image is not found, including secondary urls or any of the other options i.e. cursor:url(pointer.png,fallback.png,pointer);

Of course these may be applied to the list items in this manner li{cursor:pointer;}, as a class .class{cursor:pointer;}, or as a value for the style attribute of each element style="cursor:pointer;".

score 10 · Answer 17 · edited Apr 14 '19 at 21:28

10

Use:

ul li:hover{
   cursor: pointer;
}

For more mouse events, check CSS cursor property.

edited Apr 14 '19 at 21:28

Peter Mortensen

30,738
21
105
131

answered Feb 03 '16 at 06:48

Masoud Mustamandi

498
9
15

Duplicate answer. Should've added the link as an edit to the other answer dated Dec. 21, 2014 by user3776645. – vapcguy Apr 21 '20 at 03:22

score 7 · Answer 18 · answered May 13 '18 at 10:29

You can use one of the following:

li:hover
{
 cursor: pointer;
}

or

li
{
 cursor: pointer;
}

Working example 1:

    li:hover
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Working example 2:

    li
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

score 6 · Answer 19 · edited Apr 14 '19 at 21:27

6

For a basic hand symbol:

Try

cursor: pointer

If you want a hand symbol like drag some item and drop it, try:

cursor: grab

edited Apr 14 '19 at 21:27

Peter Mortensen

30,738
21
105
131

answered Dec 24 '15 at 04:13

Nalan Madheswaran

10,136
1
57
42

score 5 · Answer 20 · edited Feb 27 '19 at 18:21

5

You can use the code below:

li:hover { cursor: pointer; }

edited Feb 27 '19 at 18:21

Jared Forth

1,577
6
17
32

answered Jun 06 '18 at 09:54

Captain JK

160
1
7

score 5 · Answer 21 · edited Jan 06 '21 at 04:23

Check the following. I get it from W3Schools.

.alias { cursor: alias; }
.all-scroll { cursor: all-scroll; }
.auto { cursor: auto; }
.cell { cursor: cell; }
.context-menu { cursor: context-menu; }
.col-resize { cursor: col-resize; }
.copy { cursor: copy; }
.crosshair { cursor: crosshair; }
.default { cursor: default; }
.e-resize { cursor: e-resize; }
.ew-resize { cursor: ew-resize; }
.grab {
  cursor: -webkit-grab;
  cursor: grab;
}
.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.help { cursor: help; }
.move { cursor: move; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nesw-resize { cursor: nesw-resize; }
.ns-resize { cursor: ns-resize; }
.nw-resize { cursor: nw-resize; }
.nwse-resize { cursor: nwse-resize; }
.no-drop { cursor: no-drop; }
.none { cursor: none; }
.not-allowed { cursor: not-allowed; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.row-resize { cursor: row-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.text { cursor: text; }
.url { cursor: url(myBall.cur), auto; }
.w-resize { cursor: w-resize; }
.wait { cursor: wait; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }

<!DOCTYPE html>
<html>

<body>
  <h1>The cursor property</h1>
  <p>Mouse over the words to change the mouse cursor.</p>
  <p class="alias">alias</p>
  <p class="all-scroll">all-scroll</p>
  <p class="auto">auto</p>
  <p class="cell">cell</p>
  <p class="context-menu">context-menu</p>
  <p class="col-resize">col-resize</p>
  <p class="copy">copy</p>
  <p class="crosshair">crosshair</p>
  <p class="default">default</p>
  <p class="e-resize">e-resize</p>
  <p class="ew-resize">ew-resize</p>
  <p class="grab">grab</p>
  <p class="grabbing">grabbing</p>
  <p class="help">help</p>
  <p class="move">move</p>
  <p class="n-resize">n-resize</p>
  <p class="ne-resize">ne-resize</p>
  <p class="nesw-resize">nesw-resize</p>
  <p class="ns-resize">ns-resize</p>
  <p class="nw-resize">nw-resize</p>
  <p class="nwse-resize">nwse-resize</p>
  <p class="no-drop">no-drop</p>
  <p class="none">none</p>
  <p class="not-allowed">not-allowed</p>
  <p class="pointer">pointer</p>
  <p class="progress">progress</p>
  <p class="row-resize">row-resize</p>
  <p class="s-resize">s-resize</p>
  <p class="se-resize">se-resize</p>
  <p class="sw-resize">sw-resize</p>
  <p class="text">text</p>
  <p class="url">url</p>
  <p class="w-resize">w-resize</p>
  <p class="wait">wait</p>
  <p class="zoom-in">zoom-in</p>
  <p class="zoom-out">zoom-out</p>
</body>

</html>

score 4 · Answer 22 · edited Jun 09 '18 at 11:28

4

Using an HTML Hack

Note: this is not recommended as it is considered bad practice

Wrapping the content in an anchor tag containing an href attribute will work without explicitly applying the cursor: pointer; property with the side effect of anchor properties (amended with CSS):

<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>

edited Jun 09 '18 at 11:28

AMDG

1,118
1
13
29

answered Jun 19 '16 at 11:19

Rohit Nair

628
3
7
22

1

This does _not_ work. Anchor tags only have a pointer cursor with underline and a different colour if they have a href. – Artyer Apr 06 '17 at 13:47
1

"How can I make the cursor a hand when a user hovers over a list item?" - For this particular question, it does. But as pointed out by @sandrooco not a good practice. – Rohit Nair Nov 06 '17 at 06:43

score 4 · Answer 23 · edited Apr 14 '19 at 21:31

4

You can also use the following style:

li {
    cursor: grabbing;
}

edited Apr 14 '19 at 21:31

Peter Mortensen

30,738
21
105
131

answered Sep 14 '17 at 11:22

Ankit Misra

99
7

score 3 · Answer 24 · answered May 23 '23 at 02:06

3

You can just use CSS style for this.

li { cursor: pointer; }

answered May 23 '23 at 02:06

Dula

1,276
5
14
23

xgqfrms · Answer 25 · 2020-10-18T04:38:32.703

just using CSS to set customize the cursor pointer


/* Keyword value */
cursor: pointer;
cursor: auto;

/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

/* 2 URLs and coordinates, with a keyword fallback */

cursor: url(one.svg) 2 2, url(two.svg) 5 5, progress;

demo

Note: cursor support for many format icons!

such as .cur, .png, .svg, .jpeg, .webp, and so on

li:hover{
  cursor: url("https://cdn.xgqfrms.xyz/cursor/mouse.cur"), pointer;
  color: #0f0;
  background: #000;
}


/*

li:hover{
  cursor: url("../icons/hand.cur"), pointer;
}

*/

li{
  height: 30px;
  width: 100px;
  background: #ccc;
  color: #fff;
  margin: 10px;
  text-align: center;
  list-style: none;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

score 1 · Answer 26 · answered Jul 04 '20 at 05:54

<style>
.para{
    color: black;
}
.para:hover{
    cursor: pointer;
    color: blue;
}
</style>
<div class="para">

In the above HTML code [:hover] is used to indicate that the following style must be applied only on hovering or keeping the mouse cursor on it.

There are several types of cursors available in CSS:

View the below code for types of cursor:

<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>

Click the below link for viewing how the cursor property acts:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

score 1 · Answer 27 · answered Feb 28 '23 at 12:28

1

it's equivalent class in tailwindcss is `cursor-pointer'.

answered Feb 28 '23 at 12:28

navinrangar

904
10
20

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

27 Answers27

Using an HTML Hack

just using CSS to set customize the cursor pointer

demo

refs

Linked

Related