Problem
Your boss wants you to change the cursor to a hand on hovering over a specific area of the website? You read that you can change the mouse cursor to a hand via css on hovering a map? But you don´t know how to do it?
Solution
You basically just need to use this css piece to set the mouse cursor to a hand:
cursor: pointer
That´s it already.
To give you an example how the css for an image could look like, where the cursor is set to a hand on hovering:
html:
<img src="...." alt="description ..." />
css:
img:hover {
cursor: pointer;
}
Explanation
The cursor can be set easily and quickly using the css shown. You just need to identify the element where you want to apply this and boom, you have the desired effect.
Background
Changing the mouse cursor to a hand on hovering over an element includes two parts:
- Using the hover pseudo class
- Change the cursor icon
1. Hover pseudo class
CSS introduced pseudo classes quiet a while ago. Those are classes available to all elements with you needing to define them or creating logic to get them working (imagine you would have to use some obscure language to create the logic of the hovering pseudo-class).
They start with a colon and are applied to all elements of a type (e.g. img:hover) or to a class that you defined ( myAwesomeClassForCreditCardInputFields:hover).
A nice list of them can be found here. In general their website is nice and helpful for finding solutions with CSS problems.
2. Change the cursor icon
Using the CSS hand cursor on hovering an element is quiet easy. UI/UX while it’s also a helpful indicator for the user that there is something special about an element. For example can a link have its usual decoration removed (underline in blue unvisited, in purple after visiting). But a hand icon can show that there is something there.
Or imagine a drag and drop field for uploads. It feels almost unnatural if you keep the pointing arrow when you hover your cursor over the designated area.
Let me know if it helped.
Best regards,
Frank
