Click function and hover function

Question

When user hovers on a circle, that particular circle along with the circles to its left should get filled with yellow and when user clicks on a circle, that particular circle along with the circles to its left should get filled with green.

When user hovers again, last active circles should rollback to hover effect function and get filled with yellow, and if the user doesn't like to click again, the previously filled circle with green must be retained.

I've given !important for the rating-hover class to give it a priority when user hovers again, now the problem is when user rates 4 for the first time and again thinks to rate 2 after that and hovers on second circle the previously filled 4 stars are still seen, I don't want to see that, the user must feel like rating newly when he hover again, if left unclicked the previously clicked stars must be retained. And please I don't like to use !important; any other solutions are welcome!

$(function() {
  $('.rating-circle').hover(function() {
      $(this).prevAll().addBack().addClass('rating-hover');
    },
    function() {
      $(this).prevAll().addBack().removeClass('rating-hover');
    });
});

$(function() {
  $('.rating-circle').click(function() {
    $('.rating-circle').removeClass('rating-chosen');
    $(this).prevAll().addBack().addClass('rating-chosen');
  });
});

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
.rating-hover {
  background-color: yellow !important;
}
.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

Rory McCrossan · Accepted Answer · 2016-11-28 16:33:30Z

1

To achieve the effect you require you just need to set the .rating-hover class to be more specific that .rating-chosen so that it overrides. To do this I prefixed it with an element selector, specifically div. You then need to also remove the .rating-hover class when the click event fires.

Finally, note that you can also put all the code in a single document.ready handler. Try this:

$(function() {
  $('.rating-circle').hover(function() {
    $(this).prevAll().addBack().addClass('rating-hover');
  }, function() {
    $(this).prevAll().addBack().removeClass('rating-hover');
  });

  $('.rating-circle').click(function() {
    $('.rating-circle').removeClass('rating-chosen rating-hover');
    $(this).prevAll().addBack().addClass('rating-chosen');
  });
});

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
div.rating-hover {
  background-color: yellow;
}
.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

edited Nov 28, 2016 at 16:33

answered Nov 28, 2016 at 16:29

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nag Over a year ago

Thank you, i have already achieved that. Let's suppose user rates 4 for the first time, and again thinks of rating 2 stars, so now previously filled 4 star remains when user tries to hover on second star. I mean to say when user hovers again the previously filled stars should not be seen.

Jeff · Accepted Answer · 2016-11-28 16:39:00Z

1

Try adding !important to the rating-hover class. The hover is working correctly but because of the rating-chosen last in your style, you will need the !important there.

$(function() {
  $('.rating-circle').hover(function() {
      $(this).prevAll().addBack().addClass('rating-hover');
    },
    function() {
      $(this).prevAll().addBack().removeClass('rating-hover');
    });
});

$(function() {
  $('.rating-circle').click(function() {
    $('.rating-circle').removeClass('rating-chosen');
    $(this).prevAll().addBack().addClass('rating-chosen');
  });
});

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
.rating-hover {
  background-color: yellow !important;
}
.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

edited Nov 28, 2016 at 16:39

answered Nov 28, 2016 at 16:36

Jeff

2911 silver badge8 bronze badges

1 Comment

Nag Over a year ago

Thank you, i have got that. Let's suppose user rates 4 for the first time, and again thinks of rating 2 stars, so now previously filled 4 star remains when user tries to hover on second star. I mean to say when user hovers again the previously filled stars should not be seen

Collectives™ on Stack Overflow

Click function and hover function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related