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

【问题标题】：hovering over image changes it to hoverimg. but after clicking the image, hover stops working将鼠标悬停在图像上会将其更改为 hoverimg。但是单击图像后，悬停停止工作
【发布时间】：2014-10-23 05:38:05
【问题描述】：

它有效，但有一个讨厌的错误，我无法理解如何修复（我是初学者）。发生的情况是有 3 个图像按钮（此处仅显示 1 的代码），当我将鼠标悬停在它们上时，它们会更改图像，并在我关闭鼠标时恢复。这是html。当我单击 3 个图像按钮（javascript）中的任何一个时，它会更改自己的图像，并将其他 2 个图像按钮设置为正常图像。在此之后（单击图像），悬停的 html 代码不再起作用。

function changeImage3() {
document.getElementById('MageBTN').src = 'images/Character/NotSelected_Mage.png';
document.getElementById('WarriorBTN').src = 'images/Character/NotSelected_Warrior.png';
}

<a href="#" onclick="changeImage3()"><img id="RogueBTN" src="images/Character/NotSelected_Rogue.png" alt="image"
    onclick="this.src='images/Character/Selected_Rogue.png'; 

    this.onmouseover = false; this.onmouseout = false;"
    onmouseover="this.src='images/Character/Selected_Rogue.png';" 

    onmouseout="this.src='images/Character/NotSelected_Rogue.png';">

</a>

【问题讨论】：

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

标签： javascript html image hover click

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果我理解正确，您希望在单击时锁定按钮的选中状态，并在单击另一个按钮时解锁/重置为未选中状态。因此，您必须存储按钮的状态，因此我建议将所有功能移动到脚本中。既然你已经把所有的图像都安排好了，那么在 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">

【讨论】：