单击更改按钮颜色

Question

我的代码有一些问题。

我想要当用户单击任何按钮时将其颜色更改为悬停颜色，并将文本颜色更改为白色。

当用户单击下一个按钮时，上一个将返回其先前状态。可能吗？

@charset "utf-8";
/* CSS Document */

.button {
  display: inline-flex;
  height: 40px;
  width: 90px;
  border: 2px solid #1A6893;
  margin-top:20px;
  color: #1A6893;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


a {
  color: #1A6893;
  text-decoration: none;
  letter-spacing: 1px;
}
#button-3 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-3 a {
  position: relative;
  transition: all .45s ease-Out;
}

#circle {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #1A6893;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
  color:#FFF;
}

#button-3:hover #circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}

#button-3:hover a {
  color: #FFF;
}
.abc{
	margin-top:20px;
	
	}
.boxes {
  margin: auto;
  padding: 50px;
  background: #484848;
}

/*Checkboxes styles*/
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #1a6893;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #1a6893;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}	
.button:active{
	color:#039;
	background-color:#396;
	}

 <div class="row" style="padding:0px;">
  <div class="col-1"><div class="button" id="button-3" onClick="changeColor();"><div id="circle"></div><a href="#">Day</a></div></div>
        <div class="col-1"><div class="button" id="button-3"><div id="circle"></div><a href="#">Week</a></div></div>
        <div class="col-1"><div class="button" id="button-3"><div id="circle"></div><a href="#">Month</a></div></div>
        <div class="col-1"><div class="button" id="button-3"><div id="circle"></div><a href="#">Day Sheet</a></div></div>
    </div>

Answer 1

只需为“活动”状态添加一些规则。

此外，我将您的所有ID更改为类。您只应在ID属性中提供唯一标识符。

此外，我将button-3:hover .circle规则更改为button-3:not(.active):hover .circle。将鼠标悬停在“活动”按钮上时，将隐藏圆圈的动画。

.button.active {
  background-color: #396;
}

.button.active a {
  color: #FFF;
}

.button-3:not(.active):hover .circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}

然后监听点击，从所有按钮中切换“活动”类：

Array.from(document.querySelectorAll('.button')).forEach(button => {
  button.classList.toggle('active', button === e.currentTarget);
}

示例

Array.from(document.querySelectorAll('.button')).forEach(button => {
  button.addEventListener('click', handleButtonClick);
});

function handleButtonClick(e) {
  Array.from(document.querySelectorAll('.button')).forEach(button => {
    button.classList.toggle('active', button === e.currentTarget);
  });
}

@charset "utf-8";

/* CSS Document */

.button {
  display: inline-flex;
  height: 40px;
  width: 90px;
  border: 2px solid #1A6893;
  margin-top: 20px;
  color: #1A6893;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.button.active {
  background-color: #396;
}
.button.active a {
  color: #FFF;
}

a {
  color: #1A6893;
  text-decoration: none;
  letter-spacing: 1px;
}

.button-3 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.button-3 a {
  position: relative;
  transition: all .45s ease-Out;
}

.circle {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #1A6893;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
  color: #FFF;
}

.button-3:not(.active):hover .circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}

.button-3:hover a {
  color: #FFF;
}

.abc {
  margin-top: 20px;
}

.boxes {
  margin: auto;
  padding: 50px;
  background: #484848;
}


/*Checkboxes styles*/

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]+label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #1a6893;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"]+label:last-child {
  margin-bottom: 0;
}

input[type="checkbox"]+label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #1a6893;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked+label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.button:active {
  color: #039;
  background-color: #396;
}

<div class="row" style="padding:0px;">
  <div class="col-1">
    <div class="button button-3">
      <div class="circle"></div><a href="#">Day</a></div>
  </div>
  <div class="col-1">
    <div class="button button-3">
      <div class="circle"></div><a href="#">Week</a></div>
  </div>
  <div class="col-1">
    <div class="button button-3">
      <div class="circle"></div><a href="#">Month</a></div>
  </div>
  <div class="col-1">
    <div class="button button-3">
      <div class="circle"></div><a href="#">Day Sheet</a></div>
  </div>
</div>