通过 JavaScript 添加鼠标悬停到链接

Question

简单的快速问题......

我有以下链接 html：

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

我有一个 javascript 函数，我想在该链接中动态输入一些 onmouseover 信息。那么，假设如果调用这个 javascript 函数，它就会变成这样：

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

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

Answer 1

添加 name 属性并分配 onmouseover

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

Answer 2

答案是，使用 setAttribute() javascript。

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')

Answer 4

如果您可以使用 jquery，请参阅： http://api.jquery.com/hover/

这是比直接改变属性要好。您的 JavaScript 函数可以动态绑定/取消绑定鼠标悬停事件并执行警报调用。

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

Answer 5

两个选择：

如果事情很小：

<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 或任何其他框架让您的生活变得更轻松

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>