How to Change Cursor on Hover in CSS

This article is to help you control the ways that a cursor in CSS can have to improve the user experience.

We will cover the following ways for managing cursor usability:

Almost all the websites are changing the cursors for better user experience or just for fun. Customizing cursors is an easy way to add an extra flourish to your site when needed.

For specifying the cursor appearance use the CSS cursor property. This property is used to change the mouse cursor type on elements. It can be useful in websites where different actions should be done rather than just clicking.

How to Make the Cursor a Hand when the User Hovers over a List Item

If you want to change a mouse pointer into a hand pointer when hovering over a list item you can set a class for your list item (<li>) and define the style only for that one. But if you want to have a hand pointer for all of your list items, just set the style for the <li> element.

Your code will look like this if you want to set a finger pointer:

li {
cursor: pointer;
}

Now let’s see an example of changing a mouse pointer into a hand pointer:

Example of changing a mouse pointer into a hand pointer:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li{
      margin-bottom:15px;
      }
      li.pointer {
      cursor: pointer;
      }
      li:hover {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h4>Hover over the list items to see how the default cursor changes into a pointer:</h4>
    <ul>
      <li>List item 1 with the default cursor.</li>
      <li class="pointer">List item 2 with the pointer cursor.</li>
      <li>Another list item with the default mouse cursor.</li>
    </ul>
  </body>
</html>

Here is another example that changes cursor pointer alternate. Here, we use :nth-child selector with nth-child(odd) as cursor: progress and nth-child(even) as cursor: pointer are used to have separate cursor types on different list items.

Example of the pointer and progress cursors:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      li:nth-child(odd) { 
      background: #1c87c9; 
      cursor: progress; 
      width: 50%; 
      padding: 5px; 
      } 
      li:nth-child(even) { 
      background: #ccc; 
      cursor: pointer; 
      width: 50%; 
      padding: 5px; 
      } 
    </style>
  </head>
  <body>
    <p>Hover over the list items to see how the cursor changes:</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
      <li>List item 5</li>
      <li>List item 6</li>
      <li>List item 7</li>
    </ul>
  </body>
</html>

It is known that the default cursor for a hyperlink is set the cursor type "pointer" while hovering. If you want to change it, you need to specify the cursor type for the <a> element with the CSS :hover selector.

To change the "pointer" to "default" you will need to use this piece of code:

a:hover {
cursor: default;
}

Have a look at this example to have a full understanding of how to use this method:

Example of changing the “pointer” to “default”:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .link:hover {
      cursor: default;
      }
    </style>
  </head>
  <body>
    <h4>Hover over the hyperlink to see how the "pointer" changes to "default":</h4>
    <p><a href="https://www.w3docs.com">W3docs</a> link with the initial "pointer" type.</p>
    <p><a class="link" href="https://www.w3docs.com">W3docs</a> link with the changed  "default" cursor type.</p>
  </body>
</html>

As links have color: blue and text-decoration: underline by default, we suggest to change link colors and go further with hyperlinks.

Check out How to Change Link Colors with CSS article for doing much more with links.

How to Have Custom Cursor Image Effect on an Element

Let’s do more fun with cursors! It’s possible to add your image as a cursor on your webpage.

Set the cursor property to an image following this piece of code:

.mycursor {
cursor: url("myimage.png"), pointer;	
}

Remember to set the cursor type to show when the browser can’t use the provided image. Otherwise, your code will not work.

This is a funny trick to add to your website when users don’t expect to see such things. Imagine you have a form where the answer corresponds to a specific emotion, here is the ideal place to use emoji images.

Example of adding an image as a cursor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background: #eee;
      text-align: center;
      }
      button {
      display: inline-block;
      background-color: #1c87c9;
      color: #eee;
      margin: 25px;
      position: relative;
      width: 140px;
      height: 45px;
      border-radius: 3px;
      border: none;
      font-size: 1.5em;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 2px 8px 0 #999;
      }
      button:hover {
      background-color: #999;
      color: #ffcc00;
      }
      #happy {
      cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto;
      }
      #sad {
      cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
      }
      #love {
      cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>What is your impression of our website?</h2>
    <button id="happy">Happy</button>
    <button id="sad">Sad</button>
    <button id="love">Love</button>
  </body>
</html>

Let’s see another funny example where icons used. You can use icons from websites where the Base64 code is provided just pasting the Base64 code in the cursor’s URL value. Or download the icon to your website and use the URL for setting the cursor.

Example of icons used as a cursor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      width: 600px;
      margin: 0.5em auto;
      }
      img {
      width: 280px;
      height: 186px;
      margin: 5px;
      display: inline-block;
      background-position: 50% 50%;
      }
      .dog {	
      cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
      }
      .cactus {	
      cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto;
      }
      .nature {	
      cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto;	
      }
      .house {
      cursor:
      url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
      }
    </style>
  </head>
  <body>
    <img class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus">
    <img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature">
    <img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog">
    <img class="house" src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house">
  </body>
</html>

All Cursor Types Example

Here see an example which contains all the possible types that a cursor can have.

For "zoom-in", "zoom-out", "grab" and "grabbing" values -webkit- property extension is added.

Example of all cursor types:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      text-align: center;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 1px solid #666;
      border-radius: 5px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #1c87c9;
      }
      .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; }
      .grab { cursor: -webkit-grab; cursor: grab; }
      .grabbing { cursor:  -webkit-grabbing; cursor: grabbing; }
      .zoom-in { cursor: -webkit-zoom-in; cursor: zoom-in; }
      .zoom-out { cursor:  -webkit-zoom-out; cursor: zoom-out; }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes:</p>
    <div class="cursor">
      <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 class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Do you find this helpful?

Related articles