页面上有两个按钮，当你点击其中一个时，它会改变颜色。
如何让这个焦点点击旁边的空字段后不会消失？
<button id="button1">Text 1</button>
<button id="button2">Text 2</button>
.button1 {
height: 48px;
width: 240px;}
.button1:hover {
background-color: red;}
.button1:focus {
background-color: green;}
.button2 {
height: 48px;
width: 240px;}
.button2:hover {
background-color: red;}
.button2:focus {
background-color: green;}
您可以使用JavaScript完成此操作。请注意，您还将ID添加到按钮中，但在您的样式中，您的目标是类。
null
let btns = document.querySelectorAll('button');
btns.forEach((btn)=> {
btn.addEventListener('click', function() {
if(document.querySelector('button.active')){
document.querySelector('button.active').classList.remove('active');
}
btn.classList.add('active');
});
});#button1 {
height: 48px;
width: 240px;}
#button1:hover {
background-color: red;}
#button1:focus, #button1.active {
background-color: green;}
#button2 {
height: 48px;
width: 240px;}
#button2:hover {
background-color: red;}
#button2:focus, #button2.active {
background-color: green;}<button id="button1">Text 1</button>
<button id="button2">Text 2</button>