Сохранить CSS: парить при смене стилей CSS с Javascript

Question

У меня есть div (действующий в качестве кнопки), которая имеет определенный CSS, который активирует при наведении на:

#btn{ 
    width: 80%; 
    height: 125px; 
    border: 1px solid #9676E8; 
    border-radius: 10px; 
    transition: background-color 0.25s ease; 
    background-color: #B299F2; 
    color: white; 
} 

#btn:hover{ 
    background-color: #9676E8; 
} 

Примечание: #9676E8 более темный оттенок #B299F2, оба синий.

Эта кнопка имеет функцию переключения, где желаемый эффект заключается в том, что щелчок по ней переключит фон, чтобы он стал красным, а не синим. Соответствующий JavaScript здесь:

var btn = document.getElementById("btn"); 
btn.addEventListener("click",function(){ 
    if(!toggle){ 
     toggle = true; 
     btn.style.border = "1px solid #FF0000"; 
     btn.style.backgroundColor = "#AA3030"; 
    } else { 
     toggle = false; 
     btn.style.border = "1px solid #9676E8"; 
     btn.style.backgroundColor = "#B299F2"; 
    } 
}); 

Примечание: #AA3030 и #FF0000 оттенки красного.

Проблема заключается в том, что после первого нажатия кнопки кнопка становится красной (по желанию). Тем не менее, при нажатии на нее, чтобы она менялась до синего цвета, после этого эффекта наведения больше нет. Наведение на него не делает ничего, кроме щелчка по-прежнему работает.

Мне не нужна кнопка для зависания, пока она красная, но я хочу сохранить эффект наведения, пока она синяя. Есть ли способ сделать это?

JsFiddle Here

Answer 1

Это происходит потому, что правило рядного устанавливается JS отменяет любые правила CSS (если они не имеют !important декларацию). Вместо того чтобы устанавливать цвет обратно на то же значение, установите его опорожнить, чтобы сбросить его:

else { 
    toggle = false; 
    btn.style.border = ""; 
    btn.style.backgroundColor = ""; 
} 

Answer 2

Если вы используете классы вместо установки свойств CSS в вас JS может быть достигнуто путем изменения классов на тумблер.

<!-- html --> 
<div id="btn" class="blue"></div> 

/* Javascript */ 
var toggle = false; 
var btn = document.getElementById("btn"); 
btn.addEventListener("click",function(){ 
    if(!toggle){ 
     toggle = true; 
     btn.className = "red"; 
    } else { 
     toggle = false; 
     btn.className = "blue"; 
    } 
}); 

/* style */ 
#btn{ 
    width: 80%; 
    height: 125px; 
    border-radius: 10px; 
    transition: background-color 0.25s ease; 
    color: white; 
} 
.blue { 
    border: 1px solid #9676E8; 
    background-color: #B299F2; 
} 
.red { 
    border: 1px solid #FF0000; 
    background-color: #AA3030; 
} 

.blue:hover{ 
    background-color: #9676E8; 
}