CODEWITHSUNDEEP
htmljavascriptcssjquery
ric12g
ric12g

Reputation: 111

Enable hover color after toogle button

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 >

Upvotes: 1

Views: 64

Answers (2)

Steve Walson
Steve Walson

Reputation: 470

Remove the semi-colon in onclick:

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

Upvotes: 0

A Haworth
A Haworth

Reputation: 36512

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 >

Upvotes: 1

Related Questions