html - 选择悬停的元素之前的所有元素

我有一个装有5个直列星标的容器。

我需要的是，当您将鼠标悬停在恒星，恒星和所有恒星上时，才将其获得不同的背景。 (我使用的是 Sprite ，因此我为此更改了背景位置)

标记:

<div class="wpr">
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
</div>

如果使用同级组合器(〜)，则会得到相反的效果。

.star:hover, .star:hover ~ .star
{
    background-position: 0 -18px;
}

FIDDLE

在悬停的星星之前，我该如何对所有星星执行此操作？

最佳答案

对于任何认为direction: rtl太过粗俗的人(因为它从来没有真正设计来对齐一组星级图标)，我建议改为floating the stars to the right:

.star {
    float: right;
    width: 20px;
    height: 15px;
    background: url(stars.png) 0 -1px no-repeat;
}

由于包装器本身还是嵌入式块，因此仍将缩小以适合。

为此，如果您确定自己确实讨厌内联块并希望完全抛弃它们，则可以使用float the wrapper as well:

.wpr {
    padding: 10px 20px;
    border: 1px solid gold;
    border-radius: 5px;
    float: left;
    position: relative;
    font-size: 0;
}