So, If I put the Mouse over the "CHANGE" button, the orange hover color works normally.

If I click the "CHANGE" button once ,the color turns red but hover color disappears (that's ok).

If I press it 2 times ,it returns to the first color(blue), but the hover color doesn't work.

How can the hover color disappear in the first click (as it does now) and reappear in the second click, as in the beginning? Thanks a lot!!!

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 >

CodePudding user response：

<button  id="mute1" onclick="changeColor()">CHANGE</button >

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The problem is that the hover only changes color via a class whereas the click changes the inline style and that takes precedence. If you look with your browser dev tools you'll see that the element has an inline background style set once you've done the first click.

If you want to stop that and always have a hover make the background color orange you have a couple of alternatives:

• stick to changing the inline style on click but also add an event listener for mouseover in JS which changes inline background to orange or

• use classes for everything.