.stars.s1
.star
.star
.star.pick
.star
.star
.stars.s2
.star.half
.star.half
.star.half
.star.half
.star.half
.star.half
.star.half
.star.half
.star.half.pick
.star.half
View Compiled
@import "compass/css3";
$on: linear-gradient(left, lightskyblue, violet, mediumvioletred);
$on2: linear-gradient(left, greenyellow, orange, crimson);
$off: #c0c0c0;
$fill: true;
$tilt: true;
.stars {
height: 4rem;
width: 20rem;
@if $fill {
@include background($on);
&.s2 {
@include background($on2);
}
} @else {
background-color: $off;
&:hover {
@include background($on);
&.s2 {
@include background($on2);
}
}
}
&:hover .star {
background-color: transparent;
}
.star {
@if $tilt {
background-image: url('https://s.cdpn.io/2361/whitestarbigtilt.png');
} @else {
background-image: url('https://s.cdpn.io/2361/whitestarbig.png');
}
height: 100%;
width: 4rem;
float: left;
cursor: pointer;
&.half {
@if $tilt {
width: 1.7em;
} @else {
width: 2rem;
}
&:nth-child(2n) {
background-position: right;
@if $tilt {width: 2.3rem;}
}
}
}
}
.pick ~ .star, .star:hover ~ .star {
background-color: $off;
}
html {
font-size: 10px;
}
.stars {
margin: -6rem -10rem;
position: absolute;
left: 50%;
top: 50%;
&.s2 {
margin-top: 2rem;
}
}
View Compiled
$('.stars').on('click', '.star', function() {
$(this).siblings('.pick').removeClass('pick');
$(this).addClass('pick');
});
This Pen doesn't use any external CSS resources.