SOURCE

    var score=document.getElementsByClassName("score")[0];
    var stars=score.getElementsByClassName("score_stars")[0];
    var starSpan=stars.getElementsByTagName("span");
    var len=starSpan.length;

    var scoreTxt=document.getElementsByClassName("score_text")[0];
    var aTxt=['很差','一般','还行','推荐','力荐'];
    /*减去星星*/
    var rStar= function () {
        for(var i= 0;i<len;i++){
            starSpan[i].style.backgroundPosition = "-39px 0";
        }
        scoreTxt.innerText = '';
    };

    for(var i=0;i<len;i++){
        starSpan[i].index = i;

        starSpan[i].onmouseover= function () {
            rStar();
            for(var i= 0;i<= this.index;i++){
                starSpan[i].style.backgroundPosition = "-2px 0";
            }
            scoreTxt.innerText = aTxt[i-1];
        };

        starSpan[i].addEventListener("mouseout", rStar, false);


        starSpan[i].onclick= function () {
            this.removeEventListener("mouseout", rStar, false);
        };


    }

<div class="score">
    <p class="score_stars">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </p>
    <p class="score_text">
    </p>
</div>

*{margin: 0;padding: 0;list-style: none;font-family: "microsoft yahei";}
.score{margin:25% auto; width: 250px;}
.score_stars{float: left;}
.score_stars span{ width: 18px; height: 20px;display: inline-block;background-image:url("https://wkstatic.bdimg.com/static/wkview/widget/userEvaluation/big-stars_29169e9.png") ;background-repeat: no-repeat;background-position:  -39px 0;cursor: pointer;text-indent: -999rem;}
.score_text{float: left; margin-left: 10px; width: 30px;overflow: hidden; font-size: 14px;}