摘要：代碼實(shí)現(xiàn)一星兩星三星四星五星去掉標(biāo)簽?zāi)J(rèn)樣式初始化樣式鼠標(biāo)懸浮精益求精上面我們的星星評(píng)分效果已初見(jiàn)成效，但是暴露了一個(gè)問(wèn)題，就是我們的評(píng)價(jià)機(jī)制缺少記憶功能。這里有點(diǎn)不一樣的是每個(gè)星星對(duì)應(yīng)一個(gè)單選框和一個(gè)標(biāo)簽，的層級(jí)要高于單選框。

這種星星評(píng)價(jià)效果，相信大家這個(gè)并不陌生，經(jīng)常會(huì)遇到這個(gè)。現(xiàn)在如果要我們自己實(shí)現(xiàn)一個(gè)，很多人第一反應(yīng)可能用JS+CSS去實(shí)現(xiàn)它。這種方式并沒(méi)有什么不好的地方，只是我們?cè)趶?fù)用的時(shí)候不是很方便，需要帶上JS和CSS的兩塊代碼。為了復(fù)用更簡(jiǎn)單，所以我們介紹一種純CSS的方式。

這里我們分為兩層：
第一層：div.star_evaluate 設(shè)置圖片背景icon-star-default.png，沿X軸平鋪，超出部分隱藏，作為定位父級(jí)。
第二層：a標(biāo)簽作為第二層，這里我們需要設(shè)置其定位屬性，初始化設(shè)定好每個(gè)a標(biāo)簽的位置，以及其背景圖片。這邊需要注意的是一定要給a便簽加上層級(jí)。

鼠標(biāo)移動(dòng)對(duì)應(yīng)的星星時(shí)，將其left屬性設(shè)置為0，然后設(shè)置其寬度，這個(gè)寬度由其對(duì)應(yīng)的星級(jí)決定，最后別忘了設(shè)置其層級(jí)。

關(guān)于層級(jí)的設(shè)定，我們一定要保證div.star_evaluate 代碼實(shí)現(xiàn)

HTML

CSS

/*去掉標(biāo)簽?zāi)J(rèn)樣式*/
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*初始化樣式*/
.star_evaluate {
    position: relative;
    width: 100px;
    height: 20px;
    background: url("icon-star-default.png") repeat-x;
    background-size: 20px 20px;
    overflow: hidden;
}

.star {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 2;
}

.star_1 {
    left: 0;
}

.star_2 {
    left: 20px;
}

.star_3 {
    left: 40px;
}

.star_4 {
    left: 60px;
}

.star_5 {
    left: 80px;
}

/*鼠標(biāo)懸浮*/
.star:hover {
    cursor: pointer;
    background: url("icon-star-active.png") repeat-x;
    background-size: 20px 20px;
    left: 0;
    z-index: 1;
}

.star_1:hover {
    width: 20px;
}

.star_2:hover {
    width: 40px;
}

.star_3:hover {
    width: 60px;
}

.star_4:hover {
    width: 80px;
}

.star_5:hover {
    width: 100px;
}

上面我們的星星評(píng)分效果已初見(jiàn)成效，但是暴露了一個(gè)問(wèn)題，就是我們的評(píng)價(jià)機(jī)制缺少記憶功能。接下來(lái)我們來(lái)優(yōu)化一下。

同上。

這邊我們實(shí)現(xiàn)星星評(píng)分記憶的功能主要依賴input[type=radio]單選框,我們的星星評(píng)分主要分為三個(gè)狀態(tài)。
初始化狀態(tài)：在初始化狀態(tài)下，我們需要跟上面一樣初始化星星的位置。這里有點(diǎn)不一樣的是每個(gè)星星對(duì)應(yīng)一個(gè)單選框和一個(gè)label標(biāo)簽，label的層級(jí)要高于單選框。另外我們通過(guò)label的for的屬性來(lái)實(shí)現(xiàn)和單選框的聯(lián)系。
懸浮狀態(tài)：在懸浮狀態(tài)下，我們要根據(jù)懸浮所對(duì)應(yīng)的星星來(lái)設(shè)置label標(biāo)簽的寬度，left屬性設(shè)置為0。此時(shí)我們要保證該懸浮狀態(tài)下的label標(biāo)簽的層級(jí)低于其他label標(biāo)簽。
選中狀態(tài)：在選中狀態(tài)下，我們跟懸浮狀態(tài)一樣設(shè)置label標(biāo)簽的寬度。

HTML

CSS3

        /*去掉標(biāo)簽?zāi)J(rèn)樣式*/
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        input {
            margin: 0;
        }

        /*初始化樣式*/
        .star_evaluate {
            position: relative;
            width: 100px;
            height: 20px;
            background: url("icon-star-default.png") repeat-x;
            background-size: 20px 20px;
            overflow: hidden;
        }

        .star,.score{
            display: block;
            height: 20px;
            width: 20px;
            position: absolute;
        }
        .star{
            z-index: 2;
        }
        .score{
            opacity: 0;
        }

        .star_1, .score_1 {
            left: 0;
        }

        .star_2, .score_2 {
            left: 20px;
        }

        .star_3, .score_3 {
            left: 40px;
        }

        .star_4, .score_4 {
            left: 60px;
        }

        .star_5, .score_5 {
            left: 80px;
        }

        /*鼠標(biāo)懸浮*/
        .star:hover {
            cursor: pointer;
            background: url("icon-star-active.png") repeat-x;
            background-size: 20px 20px;
            left: 0;
            z-index: 1;
        }

        .star_1:hover {
            width: 20px;
        }

        .star_2:hover {
            width: 40px;
        }

        .star_3:hover {
            width: 60px;
        }

        .star_4:hover {
            width: 80px;
        }

        .star_5:hover {
            width: 100px;
        }

        /*選中之后*/
        .score:checked + .star {
            background: url("icon-star-active.png") repeat-x;
            background-size: 20px 20px;
            left: 0;
        }

        .score_1:checked + .star_1 {
            width: 20px;
        }

        .score_2:checked + .star_2 {
            width: 40px;
        }

        .score_3:checked + .star_3 {
            width: 60px;
        }

        .score_4:checked + .star_4 {
            width: 80px;
        }

        .score_5:checked + .star_5 {
            width: 100px;
        }