Make CSS Hover State Remain After "Unhovering"

Make CSS hover state remain after unhovering

You can use CSS transition with delay. But you can't use it with display property, So do it with visibility instead.

.btn-group .dropdown-menu {
  display: inline-flex;
  transition: all 0s ease 1s; /*delay 1s*/
  visibility: hidden;
}
.btn-group:hover .dropdown-menu {
  transition-delay: 0s;
  visibility: visible;
}

Updated jsFiddle

How to make hover effect stays even after unhover?

Just add an mouseover event to .circle element and write an active CSS class which has background-color property and when event occurs remove active class from any .circle and add it to current element

$(".container span.circle").on('mouseover',function(){
    $(".circle").removeClass('active');//remove from other elements
    $(this).addClass('active');
});

CSS

.active {
  background:orange;
  transition: all 0.5s ease
}

Updated Fiddle

Keep css animation appearing after unhovering state

You only need to pause animation with

-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;

And run it again on hover

-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;

<html><div class="hoverover">Hover Over Me</div>
<ul class="circles">  <li class="circle"></li>  <li class="circle"></li>  <li class="circle"></li></ul>
<style>.circle {  width: 50px;  height: 50px;  border-radius: 50px;  background-color: blue;  list-style: none;  opacity: 0;  transform: scale(0);}
.circles li {  margin-top: 10px;}
.circles .circle{   animation: popin .25s forwards;   -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */    animation-play-state: paused;}.hoverover:hover + .circles .circle { -webkit-animation-play-state: running; /* Chrome, Safari, Opera */    animation-play-state: running;}
@keyframes popin {  80% {    transform: scale(1.15);  }  100% {    opacity: 1;    transform: scale(1);  }}</style>
</html>

Make css :hover style not go away

You could toggle a css class on click pretty easily with a bit of javascript:

document.body.addEventListener('click', 
  (e) => e.target.classList.toggle('active')
);

.active {
  background: lightgreen;
}

<p>Click me</p>
<p>Or me</p>

Is there a way to make the :hover stay?

Here's a way to do it with JS, I'd suggest using this one:

var ss = document.getElementById('SS');
ss.addEventListener('mouseover', function() {  //ss.classList.add('SS-hover');  ss.classList.toggle('SS-hover');})

#SS {  width: 300px;  height: 300px;  background-image: url(https://media1.tenor.com/images/a8479ab2587f60773c0032ada0c85d3b/tenor.gif?itemid=5751040);  background-size: cover;  margin: auto;}
.SS-hover {  transform: translate(500px);}
#SS p {  text-align: center;  font-size: 140%;  font-weight: bold;  color: red;  text-shadow: 0 0 5px black;  padding-top: 265px;}

<div id="SS">  <p>You will never catch me!!!</p></div>

Make CSS Hover State Remain After "Unhovering"