Home>

Please tell me how to make it so that when you click on a block, the color changes its value and returns to the original value if you click on another block. I made the current task using the pseudo-class active, but when I click on another block, the color of the button does not become the same

Code example:

.void_history {
  display: flex;
  flex-direction: column;
}
.void_history-item {
  width: 200px;
  height: 50px;
  background: # 248a52;
  border: 1px solid # 006633;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: white;
  transition: background 9999999s;
}
.void_history-item: active {
  background: red;
  transition: background 0s;
} 
<
div class= "void_history" >
  <
div class= "void_history-item" >
First choice <
/div >
  <
div class= "void_history-item" >
Second choice <
/div >
  <
div class= "void_history-item" >
Third choice <
/div >
  <
div class= "void_history-item" >
Fourth choice <
/div >
<
/div >

Why did you put transition: background 9999999s ;?

Anton Shchyrov2021-10-15 02:39:11

An array is passed over all elements and change /disable properties. We clicked on an element, went through a loop, disabled everything, then add the desired properties to event.target.

Серега Мангышев2021-10-15 02:39:11

@AntonShchyrov thought this crutch would help achieve the desired result, but it only confused me more

kiskiskit2021-10-15 02:39:11