koenhendriks/Simple-Star-Rating.markdown

## index.html
<body>
  <h2>Stars</h2>
  <div class="stars">
    <span class="fa fa-star-o star"></span>
    <span class="fa fa-star-o star"></span>
    <span class="fa fa-star-o star"></span>
    <span class="fa fa-star-o star"></span>
    <span class="fa fa-star-o star"></span>
  </div>
</body>

## script.js
$('.star').hover(function(){
  $(this).prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');
});

$('.star').mouseout(function(){
  $(this).prevAll().andSelf().removeClass('fa-star').addClass('fa-star-o');
});

$('.star').click(function(){
		   alert($(this).prevAll().length+1);
});

## Simple-Star-Rating.markdown

      
    Raw
  

              Simple-Star-Rating.markdown
            
          
    Simple Star Rating

Simple star rating with hover preview.
Using Font awesome and jQuery
A Pen by Koen Hendriks on CodePen.
License.

  
## style.css
.star{
  cursor:pointer;
}
	<body>
	<h2>Stars</h2>
	<div class="stars">
	<span class="fa fa-star-o star"></span>
	<span class="fa fa-star-o star"></span>
	<span class="fa fa-star-o star"></span>
	<span class="fa fa-star-o star"></span>
	<span class="fa fa-star-o star"></span>
	</div>
	</body>
	$('.star').hover(function(){
	$(this).prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');
	});

	$('.star').mouseout(function(){
	$(this).prevAll().andSelf().removeClass('fa-star').addClass('fa-star-o');
	});

	$('.star').click(function(){
	alert($(this).prevAll().length+1);
	});