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更改为span，您拥有有效的HTML（虽然有点乱），并且您可以拥有完全符合IE 7+的解决方案：http://jsfiddle.net/alecgorge/FEHuw/ < / p>

确保调整窗口大小以显示一行上的所有星星。一旦星形图像变小，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

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

2 个答案:

纯CSS解决方案

更好的解决方案