views:

433

answers:

6

i have a lot of html tags without href for making onclick javascript calls. but these links do not have a pointer style of cursor. they only have text style cursor.

how to set cursor style to pointer for links without hrefs?

i know i can add href="#", but 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 href.

A: 

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;">
Andy Shellam
A: 

style="cursor: pointer;"

mxmissile
+3  A: 

Just add this to your global CSS style:

a { cursor: pointer; }

This way you're not dependent on the browser default cursor style anymore.

BalusC
+4  A: 

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

Ross
Using :hover isn't necessary, and it's not guaranteed to work on links without a href.
Alxandr
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
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
@ricebowl good point.
Ross
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
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
@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
@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
A: 

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

Alxandr
A: 

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

cursor:pointer;
Dan