Javascript 将鼠标悬停在图像上会将其更改为hoverimg。但单击图像后，hover停止工作

它可以工作，但有一个讨厌的错误，我不知道如何修复我是一个初学者。 这里有3个图像按钮，仅显示1的代码，当我将鼠标悬停在它们上方时，它们会更改图像，并在我取下鼠标时恢复。这是html。 当我单击3个图像按钮javascript中的任何一个时，它会更改自己的图像，并将其他2个图像按钮设置为普通图像。 点击图像后，悬停的html代码不再工作

功能更改图像3{ document.getElementById'MageBTN'.src='images/Character/NotSelected_Mage.png'； getElementById'WarriorBTN'.src='images/Character/NotSelected_Warrior.png'； }

---

只是建议。。使用简单的css属性

 #yourID a:hover{
   //your image which want to show on hover
 }

---

如果我理解正确，您希望在单击时锁定按钮的选定状态，并在单击其他按钮时解锁/重置为未选定状态。因此，您必须存储按钮的状态，因此我建议将所有功能移动到脚本中。因为你所有的图片都排列得很好，所以在url中更改Sel/NotSel就足够了

window.onload = function() { // ensures that all elements are there

var buttons = {
        RougeBTN: document.getElementById("RougeBTN"),
        VertBTN: document.getElementById("VertBTN"),
        BleuBTN: document.getElementById("BleuBTN")
    },
    locked;

function clicked() {
    for (var btn in buttons) { // iterate over the buttons
        var b = buttons[btn];
        // if this button was clicked save the state
        if (btn == b.id) locked = btn;
        else {
            b.src = b.src.replace('/Sel', '/NotSel');
        }
    }
}

function mover() { // works only when button is not locked
    if (locked != this.id) this.src = this.src.replace('/NotSel', '/Sel');
}

function mout() { // works only when button is not locked
    if (locked != this.id) this.src = this.src.replace('/Sel', '/NotSel');
}

for (var btn in buttons) { // now set the functions to all buttons
    var b = buttons[btn];
    b.onclick = clicked; b.onmouseover = mover; b.onmouseout = mout;
}

}

在html中，所有按钮如下所示：

<img id="RougeBTN" src="images/Character/NotSelected_Rouge.png" alt="image">

---

当我运行代码时，我得到一个错误，因为document.getElementById'myImage'返回null。您发布的HTML中不存在这些ID。检查你的Javascript控制台，看看是否有错误。对不起，我不明白你的问题，你能更清楚地说明你想做什么吗？还有可能添加一些代码。我只发布了与问题相关的代码。。。我要问的是，在图像上悬停的html工作正常。但是一旦javascript运行，因为我点击了图片，html就会停止运行；this.onmouseout=false；如果我删除了这一行，当我在点击图像后将鼠标移出时，它会恢复为原始图像。我不希望这样，因为它需要看起来像它的“选定”，直到按下其他两个按钮之一。它一直工作到那一点，但是当我单击其他按钮时，原来的悬停不再工作