how to set cursor style to pointer for links without hrefs
Solution 1
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.
Solution 2
style="cursor: pointer;"
Solution 3
This is how change the cursor from an arrow to a hand when you hover over a given object
(myObject).
myObject.style.cursor = 'pointer';
Solution 4
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;">
Solution 5
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;"
Related videos on Youtube
kevin
Updated on December 23, 2021Comments
-
kevin over 2 years
I have a lot of
<a>
html tags without thehref
attribute for makingonclick
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.-
Alxandr about 14 yearsBye the way, when you say link, do you mean like "<a id="do_some_javascript">test</a>"? Or is it just a span or div tag that does some javascript?
-
-
Alxandr about 14 yearsUsing :hover isn't necessary, and it's not guaranteed to work on links without a href.
-
Ross about 14 yearsi 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.
-
Sikshya Maharjan about 14 yearsIt'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;
-
easwee about 14 yearsYou 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.
-
Alxandr about 14 yearsUsing 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...
-
Sikshya Maharjan about 14 years@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...) -
Ross about 14 years@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.
-
Brian about 11 yearsFirst 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).
-
ZhekaKozlov over 6 yearsThis doesn't work. The cursor is changed to
text
instead ofpointer
in Chrome. -
Ross over 6 years@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