Hover Effect Not Working on Active Button in CSS with Button onclick JS

Issue

I am working on a simple HTML/CSS/JS tutorial, and I've encountered an issue where the hover effect is not working on a button when it has the 'active' class. I understand the best practice is to separate HTML and JavaScript, but for this tutorial, I am using inline JavaScript for simplicity. I'm aware that in typical scenarios, using addEventListener for handling events in JavaScript is the recommended approach. However, for specific reasons related to this tutorial, I am using inline JavaScript within the onclick attribute.

Here's the code I'm working with:

.active {
   background-color: #cc0000 !important;  
}
#button3, #button4 {
  background-color: black;
  color: white;
  padding: 10px 20px;
  margin-right: 10px;
  margin-top: 20px;
  border: none;
  cursor: pointer;
}


#button3:hover, #button4:hover {
  background-color: green;
}


#button3.active:hover, #button4.active:hover {
  background-color: blue;  
}

<button id="button3" class="active" onclick="this.classList.add('active'); document.getElementById('button4').classList.remove('active');">Size: Small</button>
<button id="button4" onclick="this.classList.add('active'); document.getElementById('button3').classList.remove('active');">Size: Large</button>

I've tried increasing the specificity of the hover selector and ensuring the order of CSS rules, but the issue persists. I would appreciate any insights or suggestions on why the hover effect is not working on the active button and how to fix it.

Solution

Using the !important keyword after the background color on hover will get you the result that you want.

.active {
   background-color: #cc0000 !important;  
}
#button3, #button4 {
  background-color: black;
  color: white;
  padding: 10px 20px;
  margin-right: 10px;
  margin-top: 20px;
  border: none;
  cursor: pointer;
}


#button3:hover, #button4:hover {
  background-color: green;
}


#button3.active:hover, #button4.active:hover {
  background-color: blue !important;  
}

<button id="button3" class="active" onclick="this.classList.add('active'); document.getElementById('button4').classList.remove('active');">Size: Small</button>
<button id="button4" onclick="this.classList.add('active'); document.getElementById('button3').classList.remove('active');">Size: Large</button>

Answered By - YT_Xaos