鼠标悬停时显示链接 [英] Display link on mouseover

问题描述

我有页面的某些区域，当单击它们时，会将用户重定向到某些地址.我的问题是，当用户鼠标悬停"在这些区域上时，他们看到一个指针，但不知道链接到哪里.就我的目的而言，重要的是用户知道他们链接到的位置.我相信，当您将鼠标悬停在链接上时，Google会显示伪造"链接.

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.

我该如何实现?没有实际的<a>标签是不可能的吗?

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

我目前正在使用location.href="http://www.site.com"来重定向"site"存储在javascript数组中的用户，并且该位置会根据鼠标位置而变化.

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

该链接应显示在普通鼠标悬停链接区域中-在chrome中，这是左下角-就像当您将鼠标悬停在普通链接上时，您会看到该链接指向何处.

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.

推荐答案

如果不使用<a>标签，我认为这是不可能的，您最好希望的是使用title属性显示工具提示

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.

例如

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

使用锚链接(如Google一样)，您可以执行以下操作:

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

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

这将显示一个链接，该链接看起来像是要访问www.test.com，但单击它实际上是要访问www.mwhahaha.com，尽管我不确定这是多么合法/良好的做法(仅在Chrome)...

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

这篇关于鼠标悬停时显示链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！