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?

score 22 · Accepted Answer · edited May 23 '17 at 12:22

22

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

edited May 23 '17 at 12:22

Community

1
1

answered Apr 23 '15 at 07:36

Curtis

101,612
66
270
352

3

The only complete answer. – thomaux Apr 23 '15 at 07:37
2

Better answer worth the green tick – Akshay Apr 23 '15 at 07:38
In lieu of the original question, Akshay, you gave the correct and complete answer ;-) – Jobst Apr 23 '15 at 07:57

Akshay · Answer 2 · 2015-04-23T08:06:00.437

5

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

edited Apr 23 '15 at 08:06

answered Apr 23 '15 at 07:34

Akshay

14,138
5
46
70

1

I think the text remains highlight-able, though, right? – user3154108 Apr 23 '15 at 07:36
@Akshay I can highlight that text – user3154108 Apr 23 '15 at 07:38
@user3154108 Try now if you are using chrome http://jsfiddle.net/akshay7/fkjubs3k/1/ – Akshay Apr 23 '15 at 07:40
Please update your answer with the changes you've made in the Fiddle – thomaux Apr 23 '15 at 08:04
1

@Anzeo Sure just a minute – Akshay Apr 23 '15 at 08:04

score 0 · Answer 3 · edited Apr 23 '15 at 07:58

0

In CSS:

#div-id {
    cursor: pointer;
}

edited Apr 23 '15 at 07:58

ByteHamster

4,884
9
38
53

answered Apr 23 '15 at 07:35

Alok Pathak

875
1
8
20

score 0 · Answer 4 · answered Apr 23 '15 at 07:36

0

cursor:pointer; in your css.

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

answered Apr 23 '15 at 07:36

Nils O

1,321
9
19

score 0 · Answer 5 · answered Aug 17 '23 at 01:04

0

Set the role attribute to button:

<div role="button"></div>

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

answered Aug 17 '23 at 01:04

xuxu

6,374
1
17
11

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

5 Answers5