Javascript Object.keys（）.forEach（）不起作用

我创建了一个带有图标的菜单，用javascript对用户的鼠标做出反应，比如：CSS中的hover伪元素。 首先，我尝试使用以下代码：

var hmpg_link = document.getElementById("homepage_link"),
hmpg_pic = document.getElementById("homepage_pic");

hmpg_link.onmouseenter = function () {
    hmpg_pic.src = "images/menu/active/homepage.png";
};   

hmpg_link.onmouseenter = function () {
    hmpg_pic.src = "images/menu/active/homepage.png";
};

成功了！但是因为我有很多菜单点，所以我尝试将这个过程自动化，并编写了这段代码

var hmpg = {"link": document.getElementById("homepage_link"),
    "img": document.getElementById("homepage_pic")},
names = {hmpg: "homepage"},
path = "images/menu/";

Object.keys(names).forEach(function (item) {
    item["link"].onmouseenter = function () {
        item["img"].src = path + "active/" + names[item] + ".png";
    };

    item["link"].onmouseleave = function () {
        item["img"].src = path + "normal/" + names[item] + ".png";
    };
});

---

这个代码不起作用。浏览器控制台中没有任何错误，菜单中的图像不会更改。

看起来您正在根据您的值动态选择对象。循环think Object.keysnames将在forEach的项目值中为您提供hmpg，并使用该项目尝试访问属性链接和img，即项目['link']和项目['img']，这是不正确的，会引发错误

但是，要实现这一点，您可以将hmpg对象嵌套在另一个对象（例如mapObj）中，那么除了访问链接和img值的方式之外，其他一切都是相同的。这一次将是mapObj[item]['link']和mapObj[item]['img']。这样对你会有用的

var mapObj={ hmpg：{ 链接：“someLink”， img:‘someImg’ } }; 变量名称={ hmpg：主页 } 变量路径=图像/菜单/； Object.keysnames.forEachfunctionitem{ console.logmapObj[item]['link']； console.logmapObj[item]['img']；

---

};:hover是一个伪类，不是伪元素。请您解释一下什么是不工作。症状是什么？你在期待什么？控制台中是否有任何错误。对象hmpg的关闭位置在哪里？根据您的解释，似乎有多个元素具有相同的id。每个元素都应该有自己的id，如果您想共享一个公共属性选择器，可以改为使用类