* {margin:0;padding:0;}
body {margin:10px;font-family: “Lucida Grande”, sans-serif;font-size:1em;}
#container {position:relative;float:left;}
.rating-header {
    background-color:#999;
    color:#fff;
    padding:8px 50px 8px 15px;
    border-radius:10px 10px 0 0;
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
    -webkit-box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
}
.rating-header h1 {
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    text-transform: normal;
    letter-spacing: normal;
}
.rating-header h2 {
    font-family: “Lucida Grande”, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    text-transform: normal;
    letter-spacing: normal;
    line-height: 1.5em;
}
.rating {
    margin:0 0 20px 0;
    box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    -moz-box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    -webkit-box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    padding:5px 15px;
    border-radius:0 0 10px 10px;
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border:1px solid rgba(155,155,155,0.3)
}
.str-off, .str-on, .str-hover {font-size:30px;text-decoration:none;}
.str-off {color:rgba(150,150,150,0.5);}
.str-off:before {content:"\2606";}
.str-on {color:rgba(244,199,77,0.7);}
.str-on:before {content:"\2605";}
.str-hover:before {content:"\2605";}
.str-hover {color:rgba(244,199,77,1);} 

#number {position:relative;float:right;font-size:30px;color:rgba(150,150,150,0.5);}

//initialize clicked to false and initializes selected and arrays
var clicked = false;
var selected;
var idArray = [one, two, three, four, five];
//sets the rating stars
function f_setRating(x) {
    var i;
    switch (x) {
    case 'one':
        i = 1;
        break;
    case 'two':
        i = 2;
        break;
    case 'three':
        i = 3;
        break;
    case 'four':
        i = 4;
        break;
    case 'five':
        i = 5;
        break;
    }
    //sets the rating number
    number.innerHTML = i;
    //sets the hovered or clicked star to hover class
    idArray[i - 1].className = 'str-hover';
    //sets class of all stars below the selected or hovered to str-on
    for (pos = 0; pos < (i - 1); pos++) {
        idArray[pos].className = 'str-on';
    }
    //sets class of all stars above the selected or hovered to str-off
    for (endPos = 5; endPos > i; endPos--) {
        idArray[endPos - 1].className = 'str-off';
    }
}
//sets the selected rating
function f_setSelected(x) {
    switch (x) {
    case 'one':
        selected = 0;
        break;
    case 'two':
        selected = 1;
        break;
    case 'three':
        selected = 2;
        break;
    case 'four':
        selected = 3;
        break;
    case 'five':
        selected = 4;
        break;
    }
}
//sets class of all stars to str-off
function f_clearRating() {
    number.innerHTML = '';
    for (pos = 4; pos >= 0; pos--) {
        idArray[pos].className = 'str-off';
    }
}
//resets the rating to the clicked value
function f_resetRating() {
    var idArray = ['one', 'two', 'three', 'four', 'five'];
    f_setRating(idArray[selected]);
}
//handles onClick event
function f_onClick(x) {
    clicked = true;
    f_setRating(x);
    f_setSelected(x);
}
//handles onMouseOut event
function f_onMouseOut() {
    if (clicked) {
        f_resetRating();
    }
    else {
        f_clearRating();
    }
}
//mouseOut event listener
$(".rating a").mouseout(function() {
    f_onMouseOut();
});
//onClick event listener
$(".rating a").click(function() {
    f_onClick(this.id.toString());
});
//mouseOver event listener
$(".rating a").mouseover(function() {
    f_setRating(this.id.toString());
});

<div id="container">
  <div class="rating-header">
    <h1>A simple star rating</h1>
    <h2>Please rate this image-less gem accordingly</h2>
  </div>
  <div id="stars" class="rating">
    <a id="one" class="str-off" title='1/5' href="#"></a>
    <a id="two" class="str-off" title='2/5' href="#"></a>
    <a id="three" class="str-off" title='3/5' href="#"></a>
    <a id="four" class="str-off" title='4/5' href="#"></a>
    <a id="five" class="str-off" title='5/5' href="#"></a>
    <div id="number"></div>
  </div>
</div>