Question

I’ve created this fiddle to display my issue.

I’m setting the selected value after a user clicks a rating but would like to remove the selected value when a user hovers over again.

If they move away from the star area I want to select the original value if it was selected.

This will allow them the option to select another rating but show the previously selected rating if they mouse out.

Here is my attempt with jquery:

$('.star').click(function(e) {

e.preventDefault();

var rating = this.firstChild.data;

    if (rating > 0) {

      $('.star.star_'+rating).addClass('hovered');

      // Trying to remove class if hovered but replace selected value when I mouse out

      /*
          $('.star_container').hover(function() {
                $('.star.star_'+rating).removeClass('hovered');
          });
      */

    }   
});

Any way I can accomplish this?

Answer 1

http://jsfiddle.net/d4uPX/13/

What I did was when the user clicks an element, attach the rating as a data value for reference.

$('.star_container').data('rating', rating);

Then here is your hover function:

$('.star').hover(function() {
  $('.star').removeClass('hovered');
}, function(){
  $('.star.star_'+ $('.star_container').data('rating')).addClass('hovered');
});