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    lt ul gt     lt li gt foo lt  li gt     lt li gt goo lt  li gt   lt  ul gt    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

User · Answer

Use   li hover       cursor  pointer      Other valid values  which hand is not  for the current HTML specification can be viewed here

User · Answer

For complete cross browser  use   cursor  pointer  cursor  hand

User · Answer

Use for li   li hover       cursor  pointer      See more cursor properties with examples after running snippet option      x000D   x000D   auto            cursor  auto    x000D   default         cursor  default    x000D   none            cursor  none    x000D   context-menu    cursor  context-menu    x000D   help            cursor  help    x000D   pointer         cursor  pointer    x000D   progress        cursor  progress    x000D   wait            cursor  wait    x000D   cell            cursor  cell    x000D   crosshair       cursor  crosshair    x000D   text            cursor  text    x000D   vertical-text   cursor  vertical-text    x000D   alias           cursor  alias    x000D   copy            cursor  copy    x000D   move            cursor  move    x000D   no-drop         cursor  no-drop    x000D   not-allowed     cursor  not-allowed    x000D   all-scroll      cursor  all-scroll    x000D   col-resize      cursor  col-resize    x000D   row-resize      cursor  row-resize    x000D   n-resize        cursor  n-resize    x000D   e-resize        cursor  e-resize    x000D   s-resize        cursor  s-resize    x000D   w-resize        cursor  w-resize    x000D   ns-resize       cursor  ns-resize    x000D   ew-resize       cursor  ew-resize    x000D   ne-resize       cursor  ne-resize    x000D   nw-resize       cursor  nw-resize    x000D   se-resize       cursor  se-resize    x000D   sw-resize       cursor  sw-resize    x000D   nesw-resize     cursor  nesw-resize    x000D   nwse-resize     cursor  nwse-resize    x000D   x000D   cursors  gt  div   x000D      float  left  x000D      box-sizing  border-box  x000D      background   f2f2f2  x000D      border 1px solid  ccc  x000D      width  20   x000D      padding  10px 2px  x000D      text-align  center  x000D      white-space  nowrap  x000D       amp  nth-child even    x000D         background   eee  x000D        x000D       amp  hover   x000D         opacity  0 25 x000D        x000D    x000D   lt h1 gt Example of cursor lt  h1 gt  x000D   x000D   lt div class  cursors  gt  x000D       lt div class  auto  gt auto lt  div gt  x000D       lt div class  default  gt default lt  div gt  x000D       lt div class  none  gt none lt  div gt  x000D       lt div class  context-menu  gt context-menu lt  div gt  x000D       lt div class  help  gt help lt  div gt  x000D       lt div class  pointer  gt pointer lt  div gt  x000D       lt div class  progress  gt progress lt  div gt  x000D       lt div class  wait  gt wait lt  div gt  x000D       lt div class  cell  gt cell lt  div gt  x000D       lt div class  crosshair  gt crosshair lt  div gt  x000D       lt div class  text  gt text lt  div gt  x000D       lt div class  vertical-text  gt vertical-text lt  div gt  x000D       lt div class  alias  gt alias lt  div gt  x000D       lt div class  copy  gt copy lt  div gt  x000D       lt div class  move  gt move lt  div gt  x000D       lt div class  no-drop  gt no-drop lt  div gt  x000D       lt div class  not-allowed  gt not-allowed lt  div gt  x000D       lt div class  all-scroll  gt all-scroll lt  div gt  x000D       lt div class  col-resize  gt col-resize lt  div gt  x000D       lt div class  row-resize  gt row-resize lt  div gt  x000D       lt div class  n-resize  gt n-resize lt  div gt  x000D       lt div class  s-resize  gt s-resize lt  div gt  x000D       lt div class  e-resize  gt e-resize lt  div gt  x000D       lt div class  w-resize  gt w-resize lt  div gt  x000D       lt div class  ns-resize  gt ns-resize lt  div gt  x000D       lt div class  ew-resize  gt ew-resize lt  div gt  x000D       lt div class  ne-resize  gt ne-resize lt  div gt  x000D       lt div class  nw-resize  gt nw-resize lt  div gt  x000D       lt div class  se-resize  gt se-resize lt  div gt  x000D       lt div class  sw-resize  gt sw-resize lt  div gt  x000D       lt div class  nesw-resize  gt nesw-resize lt  div gt  x000D       lt div class  nwse-resize  gt nwse-resize lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use  cursor  pointer  cursor  hand    if you want to have a crossbrowser result

User · Answer

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  x000D   x000D  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    x000D   lt ul gt     lt li gt a lt  li gt     lt li gt b lt  li gt     lt li gt c lt  li gt   lt  ul gt  x000D   x000D   x000D   refs https   developer mozilla org en-US docs Web CSS cursor

User · Answer

For a basic hand symbol   Try  cursor  pointer    If you want a hand symbol like drag some item and drop it  try   cursor  grab

User · Answer

You can use one of the following   li hover    cursor  pointer      or  li    cursor  pointer      Working example 1    x000D   x000D      li hover x000D        x000D       cursor  pointer  x000D        x000D   lt ul gt  x000D     lt li gt foo lt  li gt  x000D     lt li gt bar lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Working example 2    x000D   x000D      li x000D        x000D       cursor  pointer  x000D        x000D   lt ul gt  x000D     lt li gt foo lt  li gt  x000D     lt li gt bar lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

You do not require jQuery for this  simply use the following CSS content   li  cursor  pointer    And voil    Handy

User · Answer

You can also use the following style   li       cursor  grabbing

User · Answer

Use   ul li hover     cursor  pointer      For more mouse events  check CSS cursor property

User · Answer

ul li hover     cursor  pointer

User · Answer

li hover  cursor  hand  cursor  pointer

User · Answer

lt style gt   para      color  black     para hover      cursor  pointer      color  blue     lt  style gt   lt div class  quot para quot  gt    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    lt style gt   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    lt  style gt    Click the below link for viewing how the cursor property acts   https   www w3schools com cssref tryit asp filename trycss cursor

User · Answer

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

User · Answer

Check the following  I get it from W3Schools   x000D   x000D   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    x000D   lt  DOCTYPE html gt   lt html gt    lt body gt     lt h1 gt The cursor property lt  h1 gt     lt p gt Mouse over the words to change the mouse cursor  lt  p gt     lt p class  alias  gt alias lt  p gt     lt p class  all-scroll  gt all-scroll lt  p gt     lt p class  auto  gt auto lt  p gt     lt p class  cell  gt cell lt  p gt     lt p class  context-menu  gt context-menu lt  p gt     lt p class  col-resize  gt col-resize lt  p gt     lt p class  copy  gt copy lt  p gt     lt p class  crosshair  gt crosshair lt  p gt     lt p class  default  gt default lt  p gt     lt p class  e-resize  gt e-resize lt  p gt     lt p class  ew-resize  gt ew-resize lt  p gt     lt p class  grab  gt grab lt  p gt     lt p class  grabbing  gt grabbing lt  p gt     lt p class  help  gt help lt  p gt     lt p class  move  gt move lt  p gt     lt p class  n-resize  gt n-resize lt  p gt     lt p class  ne-resize  gt ne-resize lt  p gt     lt p class  nesw-resize  gt nesw-resize lt  p gt     lt p class  ns-resize  gt ns-resize lt  p gt     lt p class  nw-resize  gt nw-resize lt  p gt     lt p class  nwse-resize  gt nwse-resize lt  p gt     lt p class  no-drop  gt no-drop lt  p gt     lt p class  none  gt none lt  p gt     lt p class  not-allowed  gt not-allowed lt  p gt     lt p class  pointer  gt pointer lt  p gt     lt p class  progress  gt progress lt  p gt     lt p class  row-resize  gt row-resize lt  p gt     lt p class  s-resize  gt s-resize lt  p gt     lt p class  se-resize  gt se-resize lt  p gt     lt p class  sw-resize  gt sw-resize lt  p gt     lt p class  text  gt text lt  p gt     lt p class  url  gt url lt  p gt     lt p class  w-resize  gt w-resize lt  p gt     lt p class  wait  gt wait lt  p gt     lt p class  zoom-in  gt zoom-in lt  p gt     lt p class  zoom-out  gt zoom-out lt  p gt   lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

In light of the passage of time  as people have mentioned  you can now safely just use   li   cursor  pointer

User · Answer

For being able to make anything get the  mousechange  treatment  you can add a CSS class    x000D   x000D   mousechange hover   x000D    cursor  pointer  x000D    x000D   lt span class  mousechange  gt Some text here lt  span gt  x000D   x000D   x000D    I would not say to use cursor hand since it was only valid for Internet nbsp Explorer 5 5 and below  and Internet nbsp Explorer nbsp 6 came with Windows nbsp 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

User · Answer

You can use the code below    li hover   cursor  pointer

User · Answer

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

User · Answer

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  lt html class  no-js  gt  is used  the CSS would look like this    js li   cursor  pointer

User · Answer

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     x000D   x000D   lt a href     style  text-decoration  initial  color  initial   gt  lt div gt This is bad practice  but it works  lt  div gt  lt  a gt  x000D   x000D   x000D

User · Answer

Simply just do something like this   li      cursor  pointer      I apply it on your code to see how it works    x000D   x000D  li   x000D    cursor  pointer  x000D    x000D   lt ul gt  x000D     lt li gt foo lt  li gt  x000D     lt li gt goo lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    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    x000D   x000D  div   x000D    display  block  x000D    width  400px  x000D    height  400px  x000D    background  red  x000D    cursor  url http   findicons com files icons 1840 free style 128 hand png  4 12  auto  x000D    x000D   lt div gt  x000D   lt  div gt  x000D   x000D   x000D

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

Examples related to css