When I hover over the "CHANGE" button, the orange color appears as expected. Clicking the button once turns the color red but removes the hover color, which is fine. However, clicking it twice brings back the original blue color but the hover effect is missing. Is there a way to have the hover color disappear on the first click and reappear on the second click, just like at the beginning?
var someFunction = {};
function changeColor() {
var button = document.getElementById('mute1').style.backgroundColor;
var color = '';
this.active = !this.active;
someFunction["one"] = this.active;
someFunction["two"] = this.active;
if (button !== 'red') {
color = 'red';
document.getElementById('mute1').style.backgroundColor = color;
document.getElementById('mute1').style.color = "#fff";
} else if (button === 'red') {
color = '#2c475c';
document.getElementById('mute1').style.backgroundColor = color;
document.getElementById('mute1').style.color = "#fff";
this.active = !this.active;
someFunction[this.function] = this.active;
}
}
#mute1 {
padding: 25px 50px;
background: #2c475c;
color: #fff;
border-radius:5px;
}
#mute1:hover {
background: orange;
}
<button id="mute1" onclick="changeColor();">CHANGE</button>