Нет цвета при наведении курсора после использования JavaScript один раз

Question

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

Если вы наведите курсор мыши перед нажатием «Капитолий 1», вы увидите изменение цвета фона, но после того, как вы покажете и затем скроете элементы, если вы снова наведите курсор мыши на «Капитолий»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);}

и он должен работать правильно

Answer 2

Проблема в том, что встроенные стили, которые вы устанавливаете с помощью JS, имеют приоритет над теми, которые исходят из классов CSS, из-за правил специфичности 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);
}

И затем вместо установки style элемента с помощью JS добавьте или удалите нужные классы.Например:

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

И на JS вызовите эти функции вместе для переключения между обоими классами:

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

Для получения дополнительной информации о том, как установить классы элемента, обратитесь кв classList на MDN .

Answer 3

Исправлено.Просто нужно было добавить "! Important" в класс наведения:

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