Change the mouse pointer to a hand when hovering over an element

In this article we will learn how to change the mouse pointer to a hand when passing through an element, in a simple way with only pure CSS resources.

What’s up programmer, okay? Let’s learn how to change the mouse pointer!

Some elements already natively change the mouse pointer

One of the best known cases is a link, or a tag <a>, when we pass the mouse pointer over it, the pointer automatically changes to the famous little hand

What if we want to do this with another element?

It’s perfectly justifiable and feasible, as we might have the need to create an event on an element, which is not a link, with JavaScript

And… how do we do this?

Basically we just need to change the cursor property of the target element and set the value of pointer

See an example:

p {
 cursor: pointer;
}

Here we add the little hand to a paragraph element, do the test and see that the pointer changes

Remembering that this is possible in any element, such as divs, spans and so on.

And it doesn’t stop there, the cursor has several values, not just the famous little hand, see some others:

Note that it is possible to use several symbols on the cursor, and thus covering several cases

It can create complex JavaScript events like a resize, or even a loader

This greatly expands your possibilities with pure HTML and CSS

Conclusion

In this article we learned how to change the mouse pointer to a hand

We need to just change the element’s cursor property, with CSS, and add the pointer value

This will cause a hand to appear on the element when the mouse pointer passes over it.

We also saw other possibilities for the cursor rule, such as: resize and loader icons

Want to learn more about CSS?