0

我创建了一个 CSS 菜单，我想让它们中的每一个在鼠标悬停事件上改变它们的颜色（我只是在学习 javascript，特别是 for 循环，我知道可以用 CSS3 实现这一点）。

所以，它不起作用，我在 DOM 控制台上收到此错误：Uncaught ReferenceError: linkIdOn is not defined (line 44)

这是我的 CSS：

<body>
<div id="menuPrincipal">
<div id="link1" class="link"><a href="">Link 1</a></div>
<div id="link2" class="link"><a href="">Link 2</a></div>
<div id="link3" class="link"><a href="">Link 3</a></div>
<div id="link4" class="link"><a href="">Link 4</a></div>
</div>

这是我的 JavaScript：

    function cambioColorOnMouseover(){
    for (linkId=1; linkId<5; linkId++){
        var linkIdOn='link'+linkId;
        document.getElementById(linkIdOn).style.backgroundColor="#eee";
        console.log(linkIdOn);
    }
}
function cambioColorOnLeave(){
    for (linkId=1; linkId<5; linkId++){
        var linkIdOff='link'+linkId;
        document.getElementById(linkIdOff).style.backgroundColor="#ccc";
        console.log(linkIdOff);
    }
}
document.getElementById('link'+linkIdOn).onmouseover=cambioColorOnMouseover;  <-- line 44
document.getElementById('link'+linkIdOff).onmouseout=cambioColorOnLeave;
4

2 回答 2

1

linkIdOn的范围仅限于cambioColorOnMouseover. 但这不是你唯一的问题。你需要移动一些东西。

我的建议：

for(var linkId = 1; linkId < 5; linkId++) {
    document.getElementById('link'+linkId).onmouseover = function() {
        this.style.backgroundColor = "#eee";
        console.log(this.id);
    };
    document.getElementById('link'+linkId).onmouseout = function() {
        this.style.backgroundColor = "#ccc";
        console.log(this.id);
    };
}

为了其他不知道 CSS3 方式的人的利益（尽管 OP 想在 JavaScript 中执行此操作，但这是首选方式）：

#link1, #link2, #link3, #link4, #link5 {
    background-color: #ccc;
}

#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover {
    background-color: #eee;
}

虽然如果你做了 CSS，你可能会有一个link类而不是使用 id。

（我更改了两个阻止示例工作的小错字（系统告诉我编辑必须至少为 6 个字符）感谢您的帮助！- Rosamunda）

于 2013-10-29T23:55:06.510 回答
1

您可能想要执行以下操作：

function linkOn() {
  this.style.backgroundColor = '#eee';
}

function linkOff() {
  this.style.backgroundColor = '#ccc';
}

window.onload = function() {
  var links = document.links;
  for (var i=0, iLen=links.length; i<iLen; i++) {
    links[i].onmouseover = linkOn;
    links[i].onmouseout = linkOff;
  }
}

尽管您可能最好添加和删除一个类，这样您就可以通过 CSS 而不是脚本来控制效果。

于 2013-10-30T00:14:08.080 回答