Question 299724 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Hover effect is working fine. But if you want to attach active class with the button after click event on the button, you could define the style for the element with classes, you have defined the css rules with ids. Ids have higher specificity over classes. So you could changes in your css #button3 #button4 with .button3 .button4. For your .active class definition should come after defining the initial styles for .button3,.button4.

    .button3,.button4 {
...
}
.active{
...
}

    Change all references of ids with classes in css. For html, use both id and classes.

        <button  id = "button3" class="button3 active"  onclick="this.classList.add('active'); document.getElementById('button4').classList.remove('active');">Size: Small</button>
<button id="button4" class="button4" onclick="this.classList.add('active'); document.getElementById('button3').classList.remove('active');">Size: Large</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search