How to change the cursor into a hand pointer on hover using CSS

Use the cursor CSS property to change the cursor into a hand pointer when hovering over an item.

By default, the mouse cursor shows an arrow when hovering most items on a web page, although it does change into a hand pointer when hovering over links.

However, sometimes you may wish to have the cursor change into a hand pointer when it hovers over an item other than a link.

Changing the mouse cursor into a hand pointer

In this example, you have an unordered list (<ul>) on a HTML page, and would like to have the mouse cursor change into a hand pointer when hovering over each item:

<html>
	<body>
		<ul class="my-list">
				<li>Home</li>
				<li>Products</li>
				<li>Blog</li>
				<li>Contact</li>
		</ul>
	</body>
</html>

Here, the cursor CSS property is used to perform the change:

.my-list > li {
	cursor: pointer;
}

That’s all there is to it! The mouse cursor will now change into a hand pointer when hovering over a list item.