JavaScript阻止CSS

Question

我有一组按钮，当鼠标悬停时，会改变颜色。这些运行的CSS就是这样的：

#navsite ul li button
{
    height: 60px;
    width: 60px;
    background-image: -moz-linear-gradient(bottom, black, #4D4D4D);
    box-shadow: 2px 3px 3px 2px #888888;
    border-radius: 15px;
    border-color: 359ABC;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: bottom;
}

#navsite ul li button:hover
{
    height: 60px;
    width: 60px;
    background-image: none;
    background-color: #00054C;
    box-shadow:  2px 3px 3px 2px #888888;
    border-radius: 15px;
    border-color: 359ABC;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: bottom;
}

然后，JavaScript会在点击时更改颜色（以下示例涵盖了五个按钮中的一个，并且每个按钮都有一个功能，原谅了批量）：

function dude()
{
    document.getElementById("dude").hidden=false;
    document.getElementById("bob").hidden=true;
    document.getElementById("ted").hidden=true;
    document.getElementById("joe").hidden=true;
    document.getElementById("fred").hidden=true;
    document.getElementById("button1").style.background='#00054C';
    document.getElementById("button2").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button3").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button4").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button5").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
}

我现在的问题是，在激活此脚本后，CSS规则#navsite ul li button:hover不再适用，并且根本没有鼠标悬停效果。如何修复脚本以防止CSS无法正常运行？

编辑：我应该考虑将CSS子句转换为脚本本身的一部分吗？我发现将脚本转换为CSS子句是不可能的，而且我希望能够获得最少的资源。

---

我更改了脚本，以便列出活动和非活动类，而不是列出颜色本身。但它仍然相当笨重;关于如何浓缩它的任何想法？

Answer 1

不要使用javascript直接将样式添加到元素，而是创建一个类.active并将其附加到clicked元素。然后在不活动时删除该类。

.active{-moz-linear-gradient(bottom, black, #4D4D4D)}

Answer 2

  

我应该考虑将CSS子句转换为脚本本身的一部分吗？

没有。放弃行为中的陈述。

  

我发现无法将脚本转换为CSS子句

没有。使用CSS中的类，您可以使用JavaScript动态更改它们：

button.active, button:hover {
    background: #00054C;
    /* forget about all the other properties, they are inherited!
    You know what the "C" in "CSS" stands for? */
}

JS：

document.getElementById("button1").className = "active";

顺便说一句，我猜你不应该使用IE不支持的hidden property来隐藏你的内容。改为使用内联样式：

document.getElementById("dude").style.display = "none";