How do I use an :active pseudo-class in CSS properly?-CodePudding

I tried my method here,

.Subscribe-button:hover {
  background-color : rgba(150, 0, 0, 0.917); 
  transition       : background-color 1s;
  }
.Subscribe-button:active {
  background-color : black;
  }

and it works but you have to hold your mouse click for the event to happen and I want to make the transition activate only for the hover.
P.S. I'm new to HTML and CSS and this is just a sample of the code I used.

CodePudding user response：

Since it's the same transition selector and same element it will animate. One way to do that is to add a pseudo-element to the button and change the color of that one for :active instead. Here is how:

.Subscribe-button:hover {
  background-color : rgba(150, 0, 0, 0.917); 
  transition       : background-color 1s;
}

.Subscribe-button{
  position:relative
}

.Subscribe-button:before{
  content: '';
  display:block;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  z-index:0
}
.Subscribe-button:active:before {
  background-color : black;
}

<div >Press Me</div>

CodePudding user response：

I believe you want to trigger an active state when hovered. I believe the below snippet solves your problem

.hoveractive:hover {
  /* background: black; */
  animation: nextarrow 0.1s;
  background-color: rgba(150, 0, 0, 0.917);
  transition: background-color 1s;
}

@keyframes nextarrow {
  0,100% {
    background: white;
  }
  50% {
    background: black;
  }
}

<div >
Test
</div>