- Star Rating with only CSS
<div class="star-wrapper">
<a class="star" href="javascript:alert(1)"></a>
<div class="star-wrapper">
<a class="star"></a>
<div class="star-wrapper">
<a class="star"></a>
<div class="star-wrapper">
<a class="star"></a>
</div>
</div>
</div>
</div>
.star-wrapper {
margin: 0;
padding: 0;
float: left;
height: 14px;
}
.star-wrapper .star {
margin: 0;
padding: 0;
float: left;
width: 14px;
height: 14px;
background-image: url(your_star_img_no_hover);
}
.star-wrapper>.star {
background-image: url(your_star_img_hover);
}
.star-wrapper
%a{ href: 'javascript: alert('1 point')' }
.star-wrapper
%a{ href: 'javascript: alert('2 points')' }
.star-wrapper
%a{ href: 'javascript: alert('3 points')' }
</div>
</div>
</div>
.star-wrapper {
margin: 0;
padding: 0;
float: left;
height: 14px;
.star {
margin: 0;
padding: 0;
float: left;
width: 14px;
height: 14px;
background-image: url(your_star_img_no_hover);
}
> .star {
background-image: url(your_star_img_hover);
}
}