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

CSS button: hover, disabling then re-enabling with javascript

本文关键字：新启用 启用 javascript 按钮 悬停 禁用 然后 CSS      更新时间：2023-09-26

我有一些按钮有悬停效果，使按钮的颜色在悬停时变深(使用css)。

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

当我想要程序(游戏)再次开始，我通过javascript重新启用按钮，CSS按钮:悬停效果不再工作。

解决方案吗?

javascript的enable/disable按钮函数是:

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;
}
}

我不知道为什么当你改变一个元素的背景颜色，即使你保持它的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这样的库。它允许您轻松地编辑、删除或向元素添加类。在这个例子中，我只是删除了元素中的所有类。

我认为你可以直接给出如下属性:

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