Question

我有一些按钮具有悬停效果，使悬停时按钮颜色变暗（使用css）。

当用户点击这些按钮时，我会通过javascript禁用它们。

当我希望程序（游戏）重新开始并且我通过javascript重新启用按钮时，css按钮：悬停效果不再起作用。

任何解决方案？

javascript启用/禁用按钮功能是：

function jsEnableElement(id) {

if ( document.getElementById(id) ) {
    document.getElementById(id).style.background = "#3399FF";
    document.getElementById(id).style.cursor = "pointer";
    document.getElementById(id).disabled = false;
}

}

function jsDisableElement(id) {

if ( document.getElementById(id) ) {
    document.getElementById(id).style.background = "#DDDDDD";
    document.getElementById(id).style.cursor = "default";
    document.getElementById(id).disabled = true;
}

}

Answer 1

当您保留其ID或类名称时，我不确定为什么在更改元素的背景颜色时行为会中断。但显然确实如此。

另一种方法可以解决这个问题，也许更好的方法是更改元素的类。

我不知道您要禁用哪个元素，但我使用DIV作为示例。可以在这里找到一个工作演示：

http://jsfiddle.net/yVVk6/

但仅仅为了完整性，我将在这里添加代码

<html>
<head>
    <script>
        function jsEnableElement(id) {
            if ( document.getElementById(id) ) {
                document.getElementById(id).removeAttribute("disabled");
                document.getElementById(id).className = "enabled";
                //document.getElementById(id).disabled = false;
            }
        }

        function jsDisableElement(id) {
            if ( document.getElementById(id) ) {
                document.getElementById(id).removeAttribute("enabled");
                document.getElementById(id).className = "disabled";
                //document.getElementById(id).disabled = true;
            }
        }
    </script>
</head>
<body>
    <div id="hallo" class="enabled" onclick="jsDisableElement('hallo');">Click me to disable</div>
    <div onclick="jsEnableElement('hallo');">Click me to enable it again</div>
</body>

CSS：

.enabled {
    background: #3399FF;   
}
.enabled:hover {
    background: #00FF66;
}

.disabled {
    background: #DDD;
}

编辑：我想提一下的另一件事是，如果你使用这个解决方案，那么我真的建议你使用像jQuery这样的库。它允许您轻松编辑，删除或添加类到元素。在这个例子中，我只是删除元素中的所有类。

Answer 2

我认为你可以直接给出如下所示的属性：

document.getElementById("btnL1").setAttribute("disabled","true")   //to disable the button
document.getElementById("btnL1").removeAttribute("disabled")       //enable it again

CSS按钮：悬停，禁用然后使用javascript重新启用

2 个答案: