How to make hover effect stays even after unhover?

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

CSS:

  • Lone developer but lots of xhtml css jquery work? Should i use any version control system?
  • In CSS, is it possible to target class property identified by index number?
  • Display Text On Click Inside Different DIV
  • Best way to hide inline CSS and JavaScript from downlevel browsers
  • needed a way to force redraw of <select>s in MSIE8
  • How to get the position of element transformed with css rotate
  • .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?

  • iOS browser - iFrame jumps to top when changing css or content using javascript
  • How to remove jQuery Mobile styling?
  • Scroll to top of div in AngularJS?
  • how to reset scroll position in a div using javascript
  • How redraw on canvas resize without blurring?
  • How to always display the alt attribute of an anchor tag
  • 5 Solutions collect form web for “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

    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

    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');
    });
    

    You can then have that class in CSS

    .NameOfClass {
        background-color: orange;
    }
    

    And then just remove that class when you want.

    Change .circle:hover to .hover

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

    A) IF you want orange color be forever :

    Use this 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> 

    You can use Jquery to set a class when the mouse is hovered. Then the class will remain set even after the mouse moves away.

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

    I have created a jsfiddle to demonstrate.

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

    https://jsfiddle.net/rtxq9fnu/