javascript - 如何在 Javascript 中将鼠标悬停时的 CSS 类设置为一组标签？

Answer 1

1. links.Length 恕我直言，应该是长度（小写字母）

2. this.setAttribute("class","a_hover"); （使用这个，缺少'"'）

   window.onload = function() {
   links = document.getElementsByTagName("a"); //Getting ALL of the <a> tags
   for(var i = 0; i < links.length; i++) { // 'looping' through the array 'links'
       links[i].addEventListener("mouseover", function() { this.className = "a_hover"; }, false);
   } }​
   

CSS：

​.a_hover{color:red}​

Answer 2

this.className = "a_hover";在事件处理程序内部使用。

this将引用处理程序绑定到的元素。usingclassName比 using 更简洁setAttribute。

您可以在 quirksmode.org 上找到关于 JavaScript 事件处理的全面描述。

您的代码不起作用的三个原因：

• links.Length应该是links.length（错字？）

• 您有语法错误（"在 之后缺少关闭"class）（错字？）

• 您正在循环中创建一个闭包（事件处理程序）。在执行处理程序的那一刻（当鼠标悬停在链接上时），link[i]已解决。i指的是循环变量，由于此时循环已经完成，因此它不会具有绑定处理程序时的值。

---

也就是说，我同意Bergi 的评论。您可以使用 CSS 选择器:hover将样式应用于悬停元素。在这种情况下，您也不必编写处理程序来再次删除该类。

---

动画也可以实现，但如果你自己做会变得相当复杂。已经有提供此功能的库。