我可以控制CSS选择:悬停在嵌套元素上吗？

Question

我正在尝试解决以下问题.我有以下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:http://jsfiddle.net/MkJmj/1/ 它略微修改为使用绝对网址到图像,但在其他方面相同

Answer 1

纯CSS解决方案

jsFiddle:http://jsfiddle.net/alecgorge/Sw5Ym/

这是一个纯CSS解决方案.我建议更改HTML,但这是一个有趣的练习.这是我改变的:

div.rating-star{
    display:inline-block;

...

.rating-span:hover div.rating-star {

至

div.rating-star{
    display:block;
    float:right;

...

.rating-span:hover > div.rating-star {

更好的解决方案

通过将div's 更改为's,span您拥有有效的HTML(虽然有点乱),并且您可以拥有完全IE 7+兼容的解决方案:http://jsfiddle.net/alecgorge/FEHuw/

确保调整窗口大小以显示一行上的所有星星.一旦星形图像变小,它们span就可以变小,事情会更好.