How to make the 'clickable hand' appear in an HTML document?

Question

I built a sample HTML webpage recently, and when I hover the mouse pointer over a <div> element that makes a drop down menu come down on click, the pointer changes to a cursor, allowing me to highlight the text in the <div>.

The thing is, I don't want the mouse pointer to change to a cursor.(I don't want to be able to highlight the text either.) I want it to either remain the way it is or change to the 'clickable hand' pointer that comes up when the mouse pointer hovers over a link.

How can I achieve this?

Answer 1

The cursor can be changed using CSS cursor property.

cursor:pointer;

https://css-tricks.com/almanac/properties/c/cursor/

---

You can also prevent highlighting using the user-select property:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

How to disable text selection highlighting using CSS?

---

For example:

div{
   cursor:pointer;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}