CSS按钮：悬停，禁用，然后使用javascript重新启用 [英] CSS button: hover, disabling then re-enabling with javascript
问题描述
当用户点击这些按钮时，我禁用了鼠标悬停功能他们通过javascript。
当我想要的过程（游戏）重新开始，我通过javascript重新启用按钮，css按钮：hover效果不工作任何
任何解决方案？
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;
}
}
我不知道为什么当你改变一个元素event的背景颜色时，行为会中断，虽然你保留它的ID或类名。但是显然它是。
因此，另一种方式来解决这个问题，也许一个更好的方法是更改元素的类。
我不知道你要禁用什么元素，但我使用DIV作为示例。可在此处找到有效的演示：
http：// jsfiddle .net / yVVk6 /
但是为了完成，我将在这里添加代码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 =halloclass =enabledonclick =jsDisableElement（'hallo'）;>点击我禁用< / div>
< div onclick =jsEnableElement（'hallo'）;>点击我再次启用它< / div>
< / body>
CSS：
.enabled {
background：＃3399FF;
}
.enabled：hover {
background：＃00FF66;
}
.disabled {
background：#DDD;
}
编辑：
另一件事我想提到的是，如果你去使用这个解决方案，那么我真的建议你使用像jQuery这样的库。它允许您轻松地对元素进行编辑，删除或添加类。在这个例子中，我只是从元素中删除所有的类。
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;
}
}
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:
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.
这篇关于CSS按钮：悬停，禁用，然后使用javascript重新启用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
