相关疑难解决方法(0)

我正在尝试解决以下问题.我有以下HTML:

<div style="width:50em; height:10em">
    <span class='rating-5 rating-span'>
        <span class='rating-4 rating-span'>
            <span class='rating-3 rating-span'>
                <span class='rating-2 rating-span'>
                    <span class='rating-1 rating-span'>
                        <div class='rating-star unselected'></div>
                    </span>
                    <div class='rating-star unselected'></div>
                </span>
                <div class='rating-star unselected'></div>
             </span>
             <div class='rating-star unselected'></div>
         </span>
         <div class='rating-star unselected'></div>
     </span>
</div>

和以下CSS:

div.rating-star{
    display:inline-block;
    width:20%;
    height:100%;
    /*border:solid thin black;*/
    padding:0px;
    margin:0px;
}

div.rating-star.unselected {
    background-image: url(star.jpg);   
    background-size: contain;
    background-repeat: no-repeat;
}

.rating-span:hover div.rating-star {
    background-image: url(hover.jpg);   
    background-size: contain;
    background-repeat: no-repeat;
}

这个想法是,如果你将鼠标悬停在一颗恒星上,左边的所有恒星都会亮起来.然而,实际发生的是,无论你悬停在哪里,所有的星星都会亮起来.

现在我很清楚这是因为我的:悬停选择器正在选择最外面的跨度.我的问题是:在:hover选择器的情况下,确定正在悬停的元素.在该元素包含其他元素(相同类型)的情况下,是否有办法规定应选择哪个元素.在这种情况下,它将是最低的一个.

我很欣赏我能用Javascript完成这项工作; 我只是希望有一个纯CSS解决方案.

更新 这里是一个JSFiddle: …