To change the mouse cursor when you hover over a specific element, you need to assign the cursor CSS property to your HTML element.
For example, suppose you want to change the mouse cursor to pointer hand (the one you see when you hover over a button)
This is how you do it:
<h1 style="cursor:pointer;">Hello World</h1>
You will see the cursor changes when you hover over the <h1> element above. It’s as if you’re hovering over a <button> element.
The example code below shows all possible cursor style options for your HTML elements.
Notice how your mouse cursor change as you hover to the specific element below:
See the Pen HTML change cursor icon by Nathan Sebhastian (@nathansebhastian) on CodePen.
And that’s how you can change the cursor for HTML elements 😉