Activate hover color after toggle function-CodePudding

I have read a lot of posts here but I can't find the solution.. Any ideas why hover color doesn't work on second click? (example with snippet or jsfiddle please) Thanks!!!

function toggleButton() {
  var button = document.getElementById('toggle').style.backgroundColor;
  var color = '';

if (button !== 'pink') {
  color = 'pink';
document.getElementById('toggle').style.backgroundColor = color;
document.getElementById('toggle').style.color = "#222";

} else if (button === 'pink') {
  color = '#2c475c';
document.getElementById('toggle').style.backgroundColor = color;
document.getElementById('toggle').style.color = "#fff";
  }
}

#toggle {    
  padding: 20px 45px;
  background: green;
  color: #fff;
  border-radius:5px;
  font-weight:600; 
}

#toggle:hover {  
  background: aqua;
}

<button  id="toggle" onclick="toggleButton();">TOGGLE</button >

CodePudding user response：

from comment

when you set style via javascript, it is included into a style attribute, which overwrites any other style you set from a style sheet. Instead setting new style, add a class classList.add('myNewClass') , so it can be parts of the style sheet with rules that are not the most important ones

example

document.getElementById("toggle").addEventListener("click", myFunction);

function myFunction() {
  if (this.classList.contains('pink')) {
      this.classList.toggle('darkblue');
    }
    this.classList.toggle('pink');
  };

#toggle {
  padding: 20px 45px;
  background: green;
  color: #fff;
  border-radius: 5px;
  font-weight: 600;
}

#toggle:hover,
#toggle.pink:hover,
#toggle.darkblue:hover{
  background: aqua;
}

#toggle.pink {
  background-color: pink;
  color: #222;
}

#toggle.darkblue {
  background: #2c475c;
  color: white;
}

<button id="toggle">TOGGLE</button >

CodePudding user response：

I just edit color='#2c475c' to color='' and everything works fine!

function toggleButton() {
  var button = document.getElementById('toggle').style.backgroundColor;
  var color = '';

if (button !== 'pink') {
  color = 'pink';
document.getElementById('toggle').style.backgroundColor = color;
document.getElementById('toggle').style.color = "#222";

} else if (button === 'pink') {
  color = '';
document.getElementById('toggle').style.backgroundColor = color;
document.getElementById('toggle').style.color = "#fff";
  }
}

#toggle {    
  padding: 20px 45px;
  background: green;
  color: #fff;
  border-radius:5px;
  font-weight:600; 
}

#toggle:hover {  
  background: aqua;
}

<button  id="toggle" onclick="toggleButton();">TOGGLE</button >

CodePudding user response：

Because you set the background with inline style, which has greater specificity than your CSS. If you want to override any inline style, you have to make your style in CSS !important.

#toggle:hover {  
  background: aqua !important;
}

Edit

As mentioned by @G-Cyrillus, the better way is to create classes with the color you need for the button and toggle those classes (and not inline style). For you code, it would be good to create 2 classes: for pink and grey.

.pink {
  color: #222;
  background-color: pink;
}
.grey {
  color: #fff;
  background-color: #2c475c;
}

Now you just need to edit your JS file, so it works with your new classes.

function toggleButton() {
  var button = document.getElementById("toggle");

  if (button.classList.contains("grey")) {
    button.classList.remove("grey");
    button.classList.add("pink");
  } else {
    button.classList.remove("pink");
    button.classList.add("grey");
  }
}

And because :hover has greater specificity than plain pink or grey class, it will trigger your hover styles.