Button hover does not work after I change button color using JS-CodePudding

I have a button that has a color change when hovering. And in Script the button color changes when a click event occurs. However, Hover works when the page is loaded but after the color changes, it doesn't work. The code is below:

var count = 1;

function setColor(btn, color) {
  var property = document.getElementById(btn);
  if (count == 0) {
    property.style.backgroundColor = "white";
    count = 1;
  } else {
    property.style.backgroundColor = color;
    count = 0;
  }
}

.button {
  background-color: #4caf50;
  /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}

.button1:hover {
  background-color: red;
  color: black;
  border: 2px solid #4caf50;
}

<h2> Hoverable Buttons</h2>
<button id="buttonGreen"  onclick="setColor('buttonGreen', '#122256')">
Green</button>

After I click the button event occurs and the color changes to dark blue and the hover do not work.

CodePudding user response：

button click adds inline styles which have higher priority due to that hover property changes are ignored. You can add !important to get rid of the issue

.button1:hover {
     background-color: red !important;
     color: black !important;
     border: 2px solid #4caf50;
}

<html>
  <head>
    <style>
      .button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
      }

      .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4caf50;
      }

      .button1:hover {
        background-color: red !important;
        color: black !important;
        border: 2px solid #4caf50;
      }
    </style>

    <script>
      var count = 1;
      function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {
          property.style.backgroundColor = "white";
          count = 1;
        } else {
          property.style.backgroundColor = color;
          count = 0;
        }
      }
    </script>
  </head>

  <body>
    <h2>Hoverable Buttons</h2>
    <button
      id="buttonGreen"
      
      onclick="setColor('buttonGreen', '#122256')"
      ;
    >
      Green
    </button>
  </body>
</html>

CodePudding user response：

Inline styling (applied via style attribute) takes precedence over CSS applied styling (applied via class attribute).

Before click there was no background-color defined via style, after click there is which is overruling your CSS .button1:hover background-color. See documentation on CSS Specificity for more details on this topic.

To see the hover effect after clicking the button, try updating your .button1:hover to the following:

.button1:hover {
  background-color: red !important;
  color: black;
  border: 2px solid #4caf50;
}

Note the use of !important which instructs the browser to give precedence over the inline styling.

⚠️ Using !important is generally not good practice therefore don't consider this to be a solution rather a topic to look into.

CodePudding user response：

That occurs because you set background style white. Change this line in your condition. I would remove style elememnt. But you can set transparent background. What you are like!

if (count == 0) {
   // property.style.backgroundColor = "white";
   property.removeAttribute('style');
  ...

Working example

      var count = 1;
      function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {          
          property.removeAttribute('style');
          count = 1;
        } else {
          
          property.style.backgroundColor = color;
          count = 0;
        }
      }

      .button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
      }

      .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4caf50;
      }

      .button1:hover {
        background-color: red;
        color: black;
        border: 2px solid #4caf50;
      }

<html>
  <head>
    <style>

    </style>

    <script>

    </script>
  </head>

  <body>
    <h2>Hoverable Buttons</h2>
    <button
      id="buttonGreen"
      
      onclick="setColor('buttonGreen', '#122256')"
      ;
    >
      Green1
    </button>
  </body>
</html>

Note But better to use classes and then js toggle function.

CodePudding user response：

You should probably avoid inline JS. Here's an example that uses a closure to prevent globals variables, and some modified CSS so you don't have to add styles directly on to the element. Think more of the button, and how it changes. You basically adding and removing colours, so make them the new CSS classes.

// Cache the button
const button = document.querySelector('button');

// Add an event handler to it. The handler is a function
// that returns another function which acts as the listener
// This way you don't need to create global variables.
// A function that's returned from another function, and carries
// with it the variables from its local lexical environment
// is called a closure.
button.addEventListener('click', setColor(), false);

function setColor(color) {
  
  // Initialise count
  let count = true;
  
  // Return the function to be used as the button
  // handler. Instead of updating the style directly
  // just simply add/remove classes to the element
  return function () {
    this.classList.remove('green');
    if (count) {
      this.classList.remove('blue');
      this.classList.add('white');
      this.textContent = 'White';
    } else {
      this.classList.add('blue');
      this.classList.remove('white');
      this.textContent = 'Blue';
    }

    // Change count to true if it's false, or
    // false if it's true
    count = !count;
  }

}

.button {
  border: 2px solid #4caf50;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button:hover {
  background-color: red;
}

.white { background-color: white; }
.green { background-color: #4caf50; }
.blue { background-color: #122256; color: white; }

<h2>Hoverable Buttons</h2>
<button >Green</button>