How to make hover effect stays even after unhover?

Question

I have created a simple JSFiddle for the problem. Here is the link: https://jsfiddle.net/tnkh/Loewjnr3/

CSS:

.container{
 background: white;
 display:flex;
 justify-content: center;
 align-items: center;
 height:50px
}

.circle {
 display: inline-block;
 width: 20px;
 height: 20px;
 background: #0f3757;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 margin-left:10px;
 float:left;
 transition: all 0.3s ease
}

.circle:hover {
 background:orange;
}

Basically over here, I can hover on any circle to change their color. I would like to ask how could I make the orange color stays on on any particular circle that I hovered on after the mouse moved away to white container?

Any script or CSS animation I could use to solve the problem?

Answer 1

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

JS

$(".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