Mouseleave overwrites the click when using same function

Question

I am trying to make a rating system in javascript.

I want to execute same function on click and mouseenter but opposite function on mouseleave because of which mouseleave overwrites the clicks function.

See what i am trying to say. This is my code

 $(document).ready(function() { $(".rate_btn").on({ click: function(eve) { $(this).prevAll().andSelf().addClass("rate_btn_active"); var current_rating = $(this).attr('id'); $("#current_given_rating").html(current_rating); $("#check_click").html("See its working: " + current_rating); $("#msg").html("But because of mouseleave its not retaining."); }, mouseenter: function() { $(this).prevAll().andSelf().addClass("rate_btn_active"); var current_rating = $(this).attr('id'); $("#current_given_rating").html(current_rating); }, mouseleave: function() { $(this).prevAll().andSelf().removeClass("rate_btn_active"); $("#current_given_rating").html(""); } }); }); 

 .rate_btn { width: 25px; height: 25px; margin: 5px 1px; border-radius: 5px; display: inline-block; background-color: #D8D8D8; } .rate_btn_active { background-color: #11AB0E; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="check_click"></div> <div id="msg"></div> <div> <div id="1" class="rate_btn"></div> <div id="2" class="rate_btn"></div> <div id="3" class="rate_btn"></div> <div id="4" class="rate_btn"></div> <div id="5" class="rate_btn"></div> <div id="current_given_rating" style="margin: 10px"></div> </div> 

Answer 1

Here's similar to your code. We're going to use the "active" class to dynamically show all boxes up to and including the current one the mouse is on. But when we actually click, we'll add a permanent "selected" class that will persist even after mouseleave erases the "active" class.

 $(document).ready(function() { $(".rate_btn").on({ click: function(eve) { $('.selected').removeClass('selected'); $(this).prevAll().andSelf().addClass('selected'); var current_rating = $(this).attr('id'); $("#current_given_rating").html(current_rating); }, mouseenter: function() { $(this).prevAll().andSelf().addClass("rate_btn_active"); var current_rating = $(this).attr('id'); $("#current_given_rating").html(current_rating); }, mouseleave: function() { $(this).prevAll().andSelf().removeClass("rate_btn_active"); $("#current_given_rating").html(""); } }); }); 

 .rate_btn { width: 30px; height: 25px; float:left; } .rate_btn div{ background-color: #D8D8D8; border-radius: 5px; width: 25px; height: 25px; } #ratingbox:hover .selected div{background-color: #D8D8D8;} #ratingbox:hover .r1.rate_btn_active div{background-color: rgb(220,30,30)!important;} #ratingbox:hover .r2.rate_btn_active div{background-color: rgb(200,50,30)!important;} #ratingbox:hover .r3.rate_btn_active div{background-color: rgb(200,200,30)!important;} #ratingbox:hover .r4.rate_btn_active div{background-color: rgb(50 ,200,30)!important;} #ratingbox:hover .r5.rate_btn_active div{background-color: rgb(30 ,220,30)!important;} .r1.selected div, .r1.rate_btn_active div { background-color: rgb(220,30,30);} .r2.selected div, .r2.rate_btn_active div { background-color: rgb(200,50,30);} .r3.selected div, .r3.rate_btn_active div { background-color: rgb(200,200,30);} .r4.selected div, .r4.rate_btn_active div { background-color: rgb(50 ,200,30);} .r5.selected div, .r5.rate_btn_active div { background-color: rgb(30 ,220,30);} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="check_click"></div> <div id="msg"></div> <div id="ratingbox"> <div id="1" class="rate_btn r1"><div></div></div> <div id="2" class="rate_btn r2"><div></div></div> <div id="3" class="rate_btn r3"><div></div></div> <div id="4" class="rate_btn r4"><div></div></div> <div id="5" class="rate_btn r5"><div></div></div> <div style="clear:both"></div> </div> <div id="current_given_rating" style="margin: 10px"></div>