title: How to make hover effect stays even after unhover?
body: <p>I have created a simple JSFiddle for the problem. Here is the link:
  <a href="https://jsfiddle.net/tnkh/Loewjnr3/" rel="noreferrer">https://jsfiddle.net/tnkh/Loewjnr3/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>Any script or CSS animation I could use to solve the problem?</p>