.star.starred:before { content: "\2605"; } .star:before { content: "\2606"; } .star { font-size: 2em; cursor: pointer; } .star:hover { text-shadow: 0px 0px 3px yellow; } .star.starred:hover { text-shadow: 0px 0px 3px red; }
$('.star').on('click', function() { $(this).toggleClass('starred'); if ($(this).is('.starred')) { // Do something to record that this is a favourite } });
<div class="entity"> <h3>Rate me!</h3> <span class="star"></span> </div>