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

Question

JS fiddle :https://jsfiddle.net/q3ahefdg/2/

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

我怎样才能在点击后改变颜色(像以前一样)？

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

它应该可以正常工作