Question

如果您在点击“Capitol 1”之前悬停，您将看到背景颜色发生变化，但在显示然后隐藏元素后，如果您再次悬停在“Capitol 1”上，您将看不到颜色变化。 / p>

点击后如何改变颜色（如前所述）？

function functie() {
    var x = document.getElementById("Elemente");
    if (x.style.display === "none") {
        document.getElementById("Buton1").style.backgroundColor = "rgb(132, 197, 232)";
        x.style.display = "block";
    } else {
        document.getElementById("Buton1").style.backgroundColor = "rgb(154, 208, 237)";
        x.style.display = "none";
    }

}

Answer 1

更好的方法是将background-color: rgb(132, 197, 232);放在一个单独的类中，然后随时切换它。

你可以像这样申请：

var element = document.getElementById("myDIV");
element.classList.toggle("clicked");

其中css是：

.clicked {background-color: rgb(132, 197, 232);}

它应该正常工作

Answer 2

问题在于，由于CSS specificity rules，内联样式（通过JS设置的内容）优先于来自CSS类的样式。

在悬停背景上添加!important声明，就像这样：

.LinkBaraStanga:hover  {
    background-color: rgb(132, 197, 232) !important;
}

但是，更好的解决方案是为按钮的不同情况创建不同的类，这样您就可以更好地管理不同的状态，并且不会遇到必须覆盖先前的!important声明的问题：

.LinkBaraStanga--off {
    background-color: rgb(154, 208, 237);
    ...
}
.LinkBaraStanga--off:hover  {
    background-color: rgb(132, 197, 232);
}
.LinkBaraStanga--on  {
    background-color: rgb(154, 208, 237);
}

然后不是通过JS设置元素的style，而是添加或删除所需的类。例如：

<button class="LinkBaraStanga LinkBaraStanga--off">

在JS上，将这些函数一起调用以在两个类之间切换：

element.classList.toggle('LinkBaraStanga--on')
element.classList.toggle('LinkBaraStanga--off')

有关如何设置元素类的更多信息，请参阅classList on MDN。

Answer 3

修正了它。只需在悬停类中添加“！important”：

.LinkBaraStanga:hover  { background-color: rgb(132, 197, 232)!important; }

javascript使用一次后没有悬停颜色

3 个答案: