如何使焦点属性保持不变，直到我单击另一个按钮

Question

I'm looking for a way to make the "focus" property stay until I click one of the other buttons.

Normally, focus goes away even if I click anywhere else, but I need it to stay unless I click only one of the other buttons.

Solutions that include JavaScript are accepted as well, but only without using libraries.

 button:focus { color: red } 

 <div class="example"> <button>button 1</button> <button>button 2</button> <button>button 3</button> <button>button 4</button> </div> 

Answer 1

 $("button").focusin(function(){ $('button').css('color',''); // Remove Before set color to selected button $(this).css("color", "red"); // Set Color to Selected Button }); 

 button:focus { color: red } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="example"> <button>button 1</button> <button>button 2</button> <button>button 3</button> <button>button 4</button> </div>