Enable hover color after toogle button

Question

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 >

css specificity...Setting the style directly is toggle a class, make your life easier — epascarello, Nov 10 '21 at 19:09
https://stackoverflow.com/questions/59430076/css-specificity-internal-vs-inline-vs-external-style — epascarello, Nov 10 '21 at 19:11

A Haworth · Accepted Answer · 2021-11-10T22:16:37.870

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.

This snippet removes the hover class and instead listens for mouseenter and mouseout events as well as the click on the button.

It makes the color variable global so that it can be also used in the mouseout event code to restore the color (the red or gray) that was there before.

The code here is rather basic, just within the button, you will probably want to make it into 'proper' JS functions and also to addEventListeners rather than use the inline onclick etc attributes.

let color = '#2c475c';
var someFunction = {};

function hovered() {}

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

<button id="mute1" onclick="changeColor();" onmouseenter="this.style.backgroundColor = 'orange';" onmouseout="this.style.backgroundColor = color;">CHANGE</button >

Can you please edit my snippet .... so I can understand exactly what I have to do?... Thanks — , Nov 10 '21 at 20:01

score 0 · Answer 2 · edited Nov 11 '21 at 14:51

0

Remove the semi-colon in onclick:

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

edited Nov 11 '21 at 14:51

joanis

10,635
14
30
40

answered Nov 10 '21 at 18:46

Steve Walson

450
3
7

Please give me a full example .. this works the same... – Nov 10 '21 at 20:00
1

You just remove the semicolon from onclick="changeColor();" – Steve Walson Nov 11 '21 at 10:32

Enable hover color after toogle button

2 Answers2