Question

它有效，但有一个讨厌的错误我无法理解如何修复（我是初学者）。会发生什么是有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>

Answer 1

刚建议..使用简单的css属性..

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

Answer 2

如果我已正确理解您想要在单击时锁定按钮的选定状态，并在单击另一个按钮时解锁/重置为未选中状态。因此，您必须存储按钮的状态，因此我建议将所有功能移至脚本。由于您已准备好所有图像，因此足以在网址中更改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">

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

2 个答案: