通过JavaScript为链接添加鼠标悬停效果

Question

简单快速的问题....

我有以下链接HTML：

<a href="http://www.site.com/" onmouseover="" />

我有一个JavaScript函数，想要动态地在链接中输入一些onmouseover信息。因此，假设这个JavaScript函数被调用，它可能会变成这样：

<a href="http://www.site.com/" onmouseover="alert('howdy')" />

有什么想法如何做到这一点？

- David

---

你的意思是什么？你想在用户将鼠标悬停在你的链接上时开始一个动作，并能够更改此动作吗？ - Riccardo Galli

Answer 1

给 <a> 标签添加 name 属性，并赋值 onmouseover

<a href="http://www.site.com/" onmouseover="" name="xxx"/> 
document.getelementsbyname('xxx').onmouseover = function() { alert('howdy') } 

- RameshVel

---

这里的标签名称是"a"而不是"xxx"。您需要使用getElementById和一个id属性。 - Greg B

Answer 2

答案是使用JavaScript中的setAttribute()方法。

- David

Answer 3

我认为你想表达的是：动态更改href属性信息，那么你可以使用jQuery来实现。

//Write code for prompt box and get value (when mouse-over)
$("a[href='http://www.google.com/']").attr('href', 'YOUR_GET_VALUE')

- Manish Trivedi

Answer 4

两个选项：

如果是一些小东西：

<a href="http://www.site.com/" onmouseover="this.href = 'http://stackoverflow.com'" />

如果你还有其他事情要做：

<script type="text/javascript">
    function doSomething(elem) {
        elem.href = 'http://stackoverflow.com';
    }
</script>
<a href="http://www.site.com/" onmouseover="doSomething(this)">test</a>

或者如之前所述：使用jQuery或任何其他框架可以让您的生活变得更加轻松

- Mallox

Answer 5

如果您可以使用 jQuery，请参考：http://api.jquery.com/hover/ 这比直接更改属性要好。您的 JavaScript 函数可以动态绑定/解除绑定鼠标悬停事件并执行您的提示调用。

否则，您的 JavaScript 函数将需要动态更改属性，但您需要解决浏览器差异以找到正确的元素，然后定位和修改 onmouseover 属性。

- toddles2000

Answer 6

以下内容适用于jQuery的每个版本：

首先是JavaScript代码：

  $(document).on('mouseenter','.hovLink', function (e) {
       e.preventDefault();
       e.stopPropagation();
       alert('entering ' + e.target.id);
  }).on('mouseleave','.hovLink', function (e) {
       alert('exiting ' + e.target.id);
  });

这里是HTML代码

<a href="/link" class="hovLink" id="link1">Link</a>

- Michael Nelles