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

问题

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

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

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.

Any solutions?

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

}

回答1:

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.

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

EDIT: 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.

回答2:

I think you can directly give the attribute as shown below:

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

来源：https://stackoverflow.com/questions/8429109/css-button-hover-disabling-then-re-enabling-with-javascript

标签

javascript

css

hover