How to Change Cursor on Hover in CSS
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 cursor 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 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.
Now let’s see an example of changing a mouse pointer into a hand pointer by using the "pointer" value of the cursor property. We set that cursor type only on the "pointer" class.
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>Result
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.
In the next example, the :nth-child selector is used. Here, we use nth-child(odd) for cursor: progress; and nth-child(even) for cursor: pointer; to have separate cursor types on different list items.
Example of using 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>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”:
<!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.
Example of using the "grab" cursor type on the hyperlink:
<!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 cursor property.
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>Example of using icons 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>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.
Example of using 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>