How to Change Cursor on Hover in CSS
Learn about the ways of changing the default cursor. See funny tricks to do with cursors and set images and icons as a cursor on your website.
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.
To specify the cursor appearance, use the CSS cursor property, which is used to change the mouse <span class="property">cursor</span> type on elements. It can be useful in websites where different actions should be done rather than just clicking.
We will cover the following ways for managing cursor usability:
- How to Make the Cursor a Hand when the User Hovers over a List Item
- How to Change the Cursor of Hyperlink while Hovering
- How to Have Custom Cursor Image Effect on the Element
- All Cursor Types Example
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 <span class="attribute">class</span> 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 <span class="property"> XFI7 </span> element.
Now let’s see an example of changing a mouse pointer into a hand pointer by using the "pointer" value of the <kbd class="highlighted">cursor</kbd> property. We set that cursor type only on the "pointer" class.
Example of changing a mouse pointer into a hand pointer:
How to Change cursor value for HTML li (list item)
<!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>Result
<div class="demo px-2.5 mt-1 mb-5"> #### Hover over the list items to see how the default cursor changes into a pointer:
- List item 1 with the default cursor.
- List item 2 with the pointer cursor.
- Another list item with the default mouse cursor.
</div> In the next example, the :nth-child selector is used. Here, we use <kbd class="highlighted">nth-child(odd)</kbd> for <span class="property">cursor: progress;</span> and <kbd class="highlighted">nth-child(even)</kbd> for <span class="property">cursor: pointer;</span> to have separate cursor types on different list items.
Example of using the pointer and progress cursors:
Example of how to change cursor value to progress and pointer.
<!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>How to Change the Cursor of Hyperlink while Hovering
The default cursor for a hyperlink is "pointer". To change it, you need to specify the cursor type for your <a> element with the CSS :hover selector. In our example, we style only the "link" class.
Example of changing the “pointer” to “default”:
Example of how to change cursor value for hyperlink
<!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 a blue color and 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.
Example of using the "grab" cursor type on the hyperlink:
An example of the hyperlink to an image:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
cursor: grab;
}
</style>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>How to Have Custom Cursor Image Effect on the Element
Let’s do more fun with cursors! It’s possible to add an image as a cursor on your webpage. You just need to add your image by specifying its URL as a value of the <kbd class="highlighted">cursor</kbd> property.
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:
Example of how to use emoji images for cursor property
<!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>Example of using icons as a cursor:
Example of CSS cursor property where icons are used
<!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>You can also 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.
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, the <span class="property">-webkit-</span> property extension is added.
Example of using all cursor types:
An example which contains all the possible types that a cursor can have.
<!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>