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

6
votes

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?

4
javascriptjqueryhtmlcss

4 Answers

19
votes

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;
}
5
votes

Set 

cursor:pointer

on the div

like

div{
cursor:pointer;
}

and as kurt suggested you can use 

-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
 user-select:none;

to remove the highlight

0
votes

cursor:pointer; in your css.

check here http://www.w3schools.com/cssref/pr_class_cursor.asp for al possibilities for the cursor property

0
votes

In CSS:

#div-id {
    cursor: pointer;
}