How to make the effect of freezing remain even after non-stop?

Question

I created a simple JSFiddle for the problem. Link here: 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, here I can hang on any circle to change my color. I would like to ask, how can I make the orange color on any particular circle that I hung after the mouse moved to a white container?

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

Answer 1

Just add a mouseover element to the .circle element and write an active CSS class that has the background-color property, and when event active class is removed from any .circle and add it to the 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 script

Answer 2

Using jQuery, you can add a class to an element as such:

 $(element).on('hover', function() { // this if you're hovering over the element that would change, otherwise rename 'this' to whatever element class or id you want to change $(this).addClass('NameOfClass'); }); 

Then you can use this class in CSS

 .NameOfClass { background-color: orange; } 

And then just delete this class whenever you want.

Answer 3

Change .circle:hover to .hover

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

A) If you want the orange color to be forever:

Use jquery

 $(document).ready(function(){ $('.circle').hover(function(){ $(this).addClass('hover'); }) }) 

 $(document).ready(function(){ $('.circle').hover(function(){ $(this).addClass('hover'); }) }) 

 .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.5s ease } .hover { background:orange; transition: all 0.5s ease } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class= "container"> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div> 

B) If you want the orange color to be until the mouse moves to another circle

Use jquery

 $(document).ready(function(){ $('.circle').hover(function(){ $('.circle').removeClass('hover'); $(this).addClass('hover'); }) }) 

 $(document).ready(function(){ $('.circle').hover(function(){ $('.circle').removeClass('hover'); $(this).addClass('hover'); }) }) 

 .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.5s ease } .hover { background:orange; transition: all 0.5s ease } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class= "container"> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div> 

Answer 4

You can use jquery to set the class when the mouse freezes. Then the class will remain set even after the mouse leaves.

 $(".circle").hover(function() { $(this).addClass("hovered"); }); 

I created jsfiddle to demonstrate.

Answer 5

 $( ".circle" ).mouseover(function(){ $(this).css('background','orange') } ) 

https://jsfiddle.net/rtxq9fnu/