我可以控制 :hover 在嵌套元素上的 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 选择器选择了最外层的跨度。我的问题是：在 :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 更改为span，您可以获得有效的HTML（虽然有点混乱），并且您可以获得完全兼容IE 7+ 的解决方案：http://jsfiddle.net/alecgorge/FEHuw/

确保调整窗口大小以在一行上显示所有星星。一旦星形图像变小，span 的图像就会变小，效果会更好。

Answer 2

我已经简化了您的 HTML，因为它既无效又笨拙（更不用说难以使用 CSS 选择器轻松定位）。而且，使用修改后的 HTML，CSS（如下）似乎可以按您的意愿工作。尽管它仅在 Chromium 14 中进行了测试，但旧版浏览器几乎可以肯定无法正常工作。也不是 Internet Explorer（完全是猜测）：

HTML：

<div>
    <div class='rating-star unselected'></div>
    <div class='rating-star unselected'></div>
    <div class='rating-star unselected'></div>
    <div class='rating-star unselected'></div>
    <div class='rating-star unselected'></div>
</div>

还有 CSS：

div:hover div.rating-star:hover ~ div.rating-star {
    background-image: url(http://danrumney.co.uk/images/star.jpg);   
    background-size: contain;
    background-repeat: no-repeat;
}

JS Fiddle.