在悬停项目之前选择所有项目

Question

我有一个有5个内联星的容器.

我需要的是当你将鼠标悬停在恒星,恒星和所有恒星之前获得不同的背景时.(我正在使用精灵,所以我改变了背景位置)

标记:

<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;
} 

小提琴

如何在徘徊之前为所有的星星实现这个？

Answer 1

大声笑,刚想通了,

我只需要添加direction: rtl;包装器.

小提琴

Answer 2

对于任何觉得这direction: rtl太老套的人（因为它从来没有真正设计用于对齐一组星级评级图标），我建议将星星浮动到右侧：

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

由于包装器本身就是一个内联块，因此它仍然会收缩以适应。

就此而言，如果您真的讨厌内联块并想完全放弃它们，您甚至可以浮动包装器：

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