How to make a button change color when clicked and then change back to its original color when a different button is clicked?

Question

I have two buttons and I want the background-color to change color when I click one of them and then change back to its original color when I click the other button. I also want a hover feature that shows the color the button would be if it were to be clicked with some opacity.

I've tried

button:hover{
   background-color: pink;
   opacity: .5;
}

button:focus{
   background-color: pink;
}

This works fine until I click anywhere in the screen and the color change is gone.

I've also tried

var buttons = $('button');
buttons.click(function() {
  buttons.css('background-color', 'snow');
  $(this).css('background-color', 'pink');
});

This also works fine except the hover effect stops working like I want it to. When I hover over a button, you can see the opacity change but it is no longer pink.

Is there a way to adjust either of these attempts to make it work properly? Thanks in advance

Answer 1

The problem is that your code is overriding the background-color property. Add the !important to your .button:hover and it will work as you expect. Snippet below:

 var buttons = $('button'); buttons.click(function() { buttons.css('background-color', 'snow'); $(this).css('background-color', 'pink'); }); 

 button:hover { background-color: pink !important; opacity: .5; } button:focus { background-color: pink; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>First</button> <button>Second</button> <button>Third</button> 

Answer 2

As i said use Radio Buttons... [edit] with 2 version to get value event JS or jQuery

 /* jQuery */ $('input[name="btGrp"]').on('change', function() { console.clear(); console.log ('button is ', $(this).val()); // do button stuff... }); /* */ /* pure JS * / document.querySelectorAll('input[name="btGrp"]').forEach(xRadio=>{xRadio.onchange=evt=>{ console.clear(); console.log( 'button is ', evt.target.value); // do button stuff... }}); /* */ 

 input[type="radio"] { display: none } input[type="radio"]+label { display : inline-block; background-color : snow; border : 3px solid #7986cb; border-radius : 6px; color : #37474f;; width : 160px; padding : 5px 0; text-align : center; margin : 5px; } input[type="radio"]+label:hover { background-color: lightblue; } input[type="radio"]:checked + label { background-color: pink; } input[type="radio"]:checked + label:hover { background-color: lightgreen } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="bt-1" type="radio" name="btGrp" value="b1" > <label for="bt-1">button 1 </label> <input id="bt-2" type="radio" name="btGrp" value="b2" > <label for="bt-2">button 2 </label> <input id="bt-3" type="radio" name="btGrp" value="b3" > <label for="bt-3">button 3 </label> 

Answer 3

You just need to add foucus pseudo class to button whenever button is focused the color remains and if anywhere you click the button will loose it's color

.my-button:{
background-color:black;
}

.my-button:focus{
background-color:white;
}