954,561 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

tag that shows hand on mouseover

I need a tag that doesn't go anywhere when I click on it but will show the little hand with index finger outstretched like I am hovering over the text teh tag applies to. I googled for a while, but could not find anything related to what I am looking for. I need this because I am writing a file that will execute a javascript function when I click on it, which will display some new information, so I want it to appear to the user that he/she is clicking on a link.

hinde
Junior Poster in Training
60 posts since Jul 2005
Reputation Points: 10
Solved Threads: 4
 
<A HREF="#">Link Here</A>


?

Comatose
Taboo Programmer
Team Colleague
2,910 posts since Dec 2004
Reputation Points: 361
Solved Threads: 215
 

Thanks for the reply, but I found something even better, and I am a little embarrassed that I forgot I could do this.

<a href="javascript:display_spaces()">Get spaces</a>


Much simpler. Only thing is I usually hate these links cause I always click links with my middle mouse button to open a new tab in firefox lol.

hinde
Junior Poster in Training
60 posts since Jul 2005
Reputation Points: 10
Solved Threads: 4
 

Thanks for the reply, but I found something even better, and I am a little embarrassed that I forgot I could do this.

<a href="javascript:display_spaces()">Get spaces</a>
Much simpler. Only thing is I usually hate these links cause I always click links with my middle mouse button to open a new tab in firefox lol.

Or even simpler and "W3C Correct"

<span style="cursor: hand;">Text with Hand Icon</span>


If you're feeling sassy you could even tie that span to a class and add that to the CSS file to keep your code cleaner and more efficent. Using an anchor when not needed is ghetto!

iammatt
Newbie Poster
8 posts since Apr 2006
Reputation Points: 10
Solved Threads: 0
 

The last suggestion is the best. An anchor tag with the href set to "#" will navigate to the TOP of the page when clicked, which isn't quite the same thing as "go nowhere".

Similarly, using an empty JavaScript is... well, silly, in my opinion.

So I second IAMMATT's suggestion: just style a normal element, such as span, to display the hand cursor.

However, here's my standard scold: When a user sees their cursor turn to a hand, they expect that clicking will DO SOMETHING, in particular, that they will navigate somewhere.

So, creating an element that gives the hand cursor but that does nothing, violates the User Model, which is very nearly always a bad, bad idea.

EDIT: I re-read your original post. You want a hyperlink that runs a Javascript when clicked, so the
<a href="javascript<strong>:myFunction();">Run your function</a></strong> is the proper method for this.

tgreer
Made Her Cry
Team Colleague
2,118 posts since Dec 2004
Reputation Points: 227
Solved Threads: 37
 

Here is a whole thread on the matter with many alternatives:
http://www.expertsrt.com/phpBB2/viewtopic.php?p=6668&sid=73845159058ec922f8d484e1acd201b5

I agree that using a dummy javascript call is best.

Esopo
Junior Poster in Training
50 posts since Feb 2006
Reputation Points: 14
Solved Threads: 1
 

BTW "cursor:hand" only works in IE. The correct W3C standard is actually "cursor:pointer," which will work across all major browsers.

johnnycho
Newbie Poster
10 posts since Jan 2010
Reputation Points: 10
Solved Threads: 0
 
BTW "cursor:hand" only works in IE. The correct W3C standard is actually "cursor:pointer," which will work across all major browsers.


Welcome to the community Johnny but try not to revive 4 year old threads in the future.

ShawnCplus
Code Monkey
Team Colleague
1,583 posts since Apr 2005
Reputation Points: 526
Solved Threads: 268
 

Actually, I think it's good that he corrected the answer. It's still a valid question and cursor:pointer is still valid CSS for anyone else who might have the same question in the future :)

cscgal
The Queen of DaniWeb
Administrator
19,427 posts since Feb 2002
Reputation Points: 1,474
Solved Threads: 230
 
Actually, I think it's good that he corrected the answer. It's still a valid question and cursor:pointer is still valid CSS for anyone else who might have the same question in the future :)


My post was also almost an exact quote of the response to my first post as a little throwback (I think it was Narue who responded to me)

ShawnCplus
Code Monkey
Team Colleague
1,583 posts since Apr 2005
Reputation Points: 526
Solved Threads: 268
 

I was going to reply in defense of my post but cscgal graciously came to my defense instead. (Thank you, cscgal!) I only posted my comment because I had tried what was suggested up above and it didn't work in Safari. Then I discovered http://www.quirksmode.org/css/cursor.html , where I learned that cursor:hand doesn't work in Firefox either. I thought others who found this thread via a Google search (like I did) would find the information useful.

johnnycho
Newbie Poster
10 posts since Jan 2010
Reputation Points: 10
Solved Threads: 0
 

I am one of those people, thnx for the reply johnny ;p

Molemann
Newbie Poster
1 post since May 2010
Reputation Points: 10
Solved Threads: 0
 
<span onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='default';">hi</span>
SKANK!!!!!
Posting Pro in Training
429 posts since Apr 2009
Reputation Points: 15
Solved Threads: 7
 

What happens in the span stays in the span.
The onmouseout= doesn't do what you think it is doing, and should be removed.

To see what I mean, try this <span onmouseout="this.style.cursor='wait'">hi</span>

fxm
Posting Pro
596 posts since Apr 2010
Reputation Points: 40
Solved Threads: 74
 

lol, sorry i forgot about that. the cursor thing.. lol not like a background color that doesnt chang eback!

SKANK!!!!!
Posting Pro in Training
429 posts since Apr 2009
Reputation Points: 15
Solved Threads: 7
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You