javascript - Display link on mouseover - Stack Overflow

admin管理员组

文章数量:1320661

I've got certain regions of the page that, when clicked, will redirect the user to certain addresses. My problem is that when the user 'mouses over' these regions, they see a pointer, but have no idea where it links to. For my purposes it is important that the user knows where they are being linked to. I believe Google displays 'fake' links when you mouseover links.

How can I achieve this? Is it impossible without having actual <a> tags?

I'm currently using location.href="" to redirect the user where "site" is stored in a javascript array and changes depending on the mouse position.

EDIT: The link should be displayed in the normal mouseover link area - in chrome this is the bottom left corner - just like when you mouseover an ordinary link and you see where the link leads to.

I've got certain regions of the page that, when clicked, will redirect the user to certain addresses. My problem is that when the user 'mouses over' these regions, they see a pointer, but have no idea where it links to. For my purposes it is important that the user knows where they are being linked to. I believe Google displays 'fake' links when you mouseover links.

How can I achieve this? Is it impossible without having actual <a> tags?

I'm currently using location.href="http://www.site." to redirect the user where "site" is stored in a javascript array and changes depending on the mouse position.

EDIT: The link should be displayed in the normal mouseover link area - in chrome this is the bottom left corner - just like when you mouseover an ordinary link and you see where the link leads to.

• javascript
• html

Share Improve this question Follow edited Dec 16, 2012 at 2:19 asked Dec 16, 2012 at 2:13 user993683user993683 5

• 1 You'll need to post the code that does the redirecting, we can't help without seeing what you're doing. – David Thomas Commented Dec 16, 2012 at 2:14
• Done :) Sorry about that – user993683 Commented Dec 16, 2012 at 2:20
• Where do you want the information displayed? In the status bar as for a standard link? (Bearing in mind some (most?) browsers don't let you change the status bar text from JS...) – nnnnnn Commented Dec 16, 2012 at 2:20
• You could set the 'title' attribute of the element so that when they mouse over they see the 'title' text as a tooltip. Otherwise I don't think it's possible without using anchor tags. – MadSkunk Commented Dec 16, 2012 at 2:22
• @MadSkunk Hmm, I might be able to adapt your solution with a div that follows the mouse. If you post an answer I could accept it. Though I'm still wondering how google does it. If you look at their anchor tags they are filled with masses of plicated links, but on mouseover the status bar shows the simple link – user993683 Commented Dec 16, 2012 at 2:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I don't believe this is possible without using <a> tags, the best you could hope for is to use the title attribute to show a tooltip.

e.g.

<div title='www.google.co.uk' style='cursor:pointer'>
 This is my div!
</div>

Using anchor links (as Google does), you can do something like:

<a href="http://www.mwhahaha."
   onmouseover="this.href='http://www.test.';"
   onmouseout="this.href='http://www.mwhahaha.';"
   onclick="this.href='http://www.mwhahaha.';">Link</a>​​​​​​​

This will show a link that looks like it's going to www.test., but clicking it actually goes to www.mwhahaha., although I'm not sure how legal/good practice this is (only tested this in Chrome)...

If I remember correctly, Google changes the href of the link to the real url during the mousedown event. Try pressing the mouse button while hovering over a link, but moving your mouse cursor off the link before releasing the button. When you hover over the link again, you should see a new URL.

I'm answering from my phone or else I'd check it myself. They may be doing it differently now.

本文标签： javascriptDisplay link on mouseoverStack Overflow