how to set cursor style to pointer for links without hrefs

Question

I have a lot of <a> html tags without the href attribute for making onclick javascript calls. These links do not have a pointer style of cursor. They have text style cursor.

How can I set the cursor style to pointer for links without using the href attribute?

I know I can add href="#". I have this in a lot of places in the html document, and would like to know how to make cursor style pointer for links without using the href attribute.

Bye the way, when you say link, do you mean like "test"? Or is it just a span or div tag that does some javascript? — Alxandr, Mar 09 '10 at 14:52

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

241

in your css file add this....

a:hover {
 cursor:pointer;
}

if you don't have a css file, add this to the HEAD of your HTML page

<style type="text/css">
 a:hover {
  cursor:pointer;
 }
</style>

also you can use the href="" attribute by returning false at the end of your javascript.

<a href="" onclick="doSomething(); return false;">a link</a>

this is good for many reasons. SEO or if people don't have javascript, the href="" will work. e.g.

<a href="nojavascriptpage.html" onclick="doSomething(); return false;">a link</a>

@see http://www.alistapart.com/articles/behavioralseparation

Edit: Worth noting @BalusC's answer where he mentions :hover is not necessary for the OP's use case. Although other style can be add with the :hover selector.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 09 '10 at 14:49

Ross

14,266
12
60
91

5

Using :hover isn't necessary, and it's not guaranteed to work on links without a href. – Alxandr Mar 09 '10 at 14:51
i can't imagine where it wouldn't work. this is a good way to learn, you may want to have other add behaviours similar the links with an href attribute: a background change, underline, color, et al. – Ross Mar 09 '10 at 14:53
1

It's been a while since I used this, but for < IE6 it might be worth adding a conditional comment to link to styles featuring `cursor: hand;` – David Thomas Mar 09 '10 at 15:08
You don't need conditional comment - just do .myStyle {cursor: hand;cursor:pointer;} - newer browsers will ignore hand attribute since they don't understand it anyway. Also IE6 will still understand pointer - hand is for ie5 and below. – easwee Mar 09 '10 at 15:22
Using an a in itself can cause some problems though. Especially in IE because they trigger OnBeforeUnload even though you add return false; Even a link to javascript:void(0); causes OnBeforeUnload to be called. I had a major headache with this problem at work... – Alxandr Mar 09 '10 at 15:28
@easwee, that's true, but I like to keep ie-specific amendments in their own file. Just to for the purposes of, y'know, *hygiene* and stuff... =b (oh, and I wasn't sure for which incarnation `hand` was used. And I truly hope there's no significant in-the-wild usage of IE5 these days...) – David Thomas Mar 09 '10 at 16:01
@Alxandr IE may well throw some obscure spanner in the works - that's what it does best. I've cited A List Apart above as this is their recommendation for onclick behaviour. – Ross Mar 09 '10 at 16:13
This doesn't work. The cursor is changed to `text` instead of `pointer` in Chrome. – ZhekaKozlov Sep 24 '17 at 06:14
@ZhekaKozlov could you post an example of this not working? That would help figure out if it is 'this' or your implementation of it that doesn't work – Ross Sep 25 '17 at 17:19

score 9 · Answer 2 · answered Mar 09 '10 at 14:48

9

style="cursor: pointer;"

answered Mar 09 '10 at 14:48

mxmissile

11,464
3
53
79

score 7 · Answer 3 · answered Mar 09 '10 at 14:48

Use CSS cursor: pointer if I remember correctly.

Either in your CSS file:

.link_cursor
{
    cursor: pointer;
}

Then just add the following HTML to any elements you want to have the link cursor: class="link_cursor" (the preferred method.)

Or use inline CSS:

<a style="cursor: pointer;">

score 5 · Answer 4 · edited Mar 17 '13 at 15:41

5

This is how change the cursor from an arrow to a hand when you hover over a given object (myObject).

myObject.style.cursor = 'pointer';

edited Mar 17 '13 at 15:41

Brian

5,069
7
37
47

answered Mar 17 '13 at 15:19

Lou

59
1
1

1

First off, welcome to SO, Lou! When posting/answering, please make sure to be as informative as possible and don't forget to format your code examples (as I have done for you). – Brian Mar 17 '13 at 15:40

score 4 · Answer 5 · answered Mar 09 '10 at 14:50

4

create a class with the following CSS and add it to your tags with onclick events:

cursor:pointer;

answered Mar 09 '10 at 14:50

Dan

17,375
3
36
39

score 3 · Answer 6 · answered Mar 09 '10 at 14:50

3

Give them all a common class (for instance link). Then add in css-file:

.link { cursor: pointer; }

Or as @mxmissile suggested, do it inline with style="cursor: pointer;"

answered Mar 09 '10 at 14:50

Alxandr

12,345
10
59
95

score -1 · Answer 7 · answered Jan 16 '20 at 00:37

-1

This worked for me:

<a onClick={this.openPopupbox} style={{cursor: 'pointer'}}>

answered Jan 16 '20 at 00:37

BabaRick

27
3

that's not normal javascript. What is it? – John Lord Jan 27 '23 at 15:48
Looks like React inline style syntax with click handler, presumably button role. – Jason Sturges May 23 '23 at 04:05

how to set cursor style to pointer for links without hrefs

7 Answers7

Linked

Related