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

2022-01-22 00:00:00 hover javascript css

我有一些按钮具有悬停效果，使悬停时按钮颜色变暗(使用 css).

I have some buttons which have a hover effect which makes the button color darker on hover ( with css ).

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

When the user clicks on those buttons, i disable them via javascript.

当我希望程序(游戏)重新启动并通过 javascript 重新启用按钮时，css 按钮:悬停效果不再起作用.

when i want the procedure ( game ) to start again and i re-enable the buttons via javascript, the css button: hover effect does not work any more.

有什么解决办法吗?

javascript 启用/禁用按钮功能有:

the javascript enable/disable button functions are:

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 或类名.但似乎确实如此.

I'm not sure why the behaviour breaks when you change the background color of an element eventhough you keep its ID or Class name. But appearently it does.

因此，您可以通过另一种方法来解决此问题，也许更好的方法是更改​​元素的类.

So another way for you to fix this, and its perhaps a better way is to change the class of the element.

我不知道您要禁用哪个元素，但我使用的是 DIV 作为示例.可以在此处找到工作演示:

I don't know what element you want to disable, but i'm using a DIV as example. A working demo can be found here:

http://jsfiddle.net/yVVk6/

但为了完整起见，我也会在这里添加代码

But just for completness i'll add the code in here aswell

<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 这样的库.它允许您轻松地编辑、删除或向元素添加类.在此示例中，我只是从元素中删除所有类.

Just another thing i would like to mention is, if you go with this solution, then i really advise you to use a library like jQuery. It allows you to easily edit, delete or add classes to elements. In this example i simply delete all classes from the element.

相关文章