Back home

Star rating

The Markup

star rating

CSS

.rating{
	margin:10% auto;
	height:100px;
	width:200px;
	text-align:center;
}

.rating h1{
	font-family: 'Alegreya', serif;
	font-size:42px;
	color:#ffc426;
}

.stars{
	width:200px;
	height:40px;
	display:block;
	position:relative;
	background: url(../img/stars.png) 0 100% no-repeat;
}
	.stars label{
		cursor:pointer;
		display:block;
		height:40px;
		text-indent:-9999px;	
		position:absolute;
		left:0;
		top:0;
	}

	.stars input{
		position:absolute;
		visibility:hidden;
	}

	.stars label.star-1{
		width:20%;
		z-index:6;
	}
		.stars label.star-1:hover,
		.stars label.star-1.active{
			background: url(../img/stars.png) 0px -160px no-repeat;
		}
	
	.stars label.star-2{
		width:40%;
		z-index:5;
	}
		.stars label.star-2:hover,
		.stars label.star-2.active{
			background: url(../img/stars.png) 0px -120px no-repeat;
		}

	
	.stars label.star-3{
		width:60%;	
		z-index:4;
	}
		.stars label.star-3:hover,
		.stars label.star-3.active{
			background: url(../img/stars.png) 0px -80px no-repeat;
		}
	
	.stars label.star-4{
		width:80%;
		z-index:3;
	}
		.stars label.star-4:hover,
		.stars label.star-4.active{
			background: url(../img/stars.png) 0px -40px no-repeat;
		}
	
	.stars label.star-5{
		width:100%;
		z-index:2;
	}
		.stars label.star-5:hover,
		.stars label.star-5.active{
			background: url(../img/stars.png) 0px 0px no-repeat;
		}



					

JAVASCRIPT

$(document).ready(function () {
	starRating();	
});
 
function starRating() {
	
	$('.stars label').click(function(e) {
	var $this = $(this);
		$this.closest('div').children('label').removeClass('active');
		$this.addClass('active');	
	});
	
}