选择悬停项目之前的所有项目答案

【问题标题】：Select all items before hovered item选择悬停项目之前的所有项目
【发布时间】：2014-03-06 13:34:53
【问题描述】：

我有一个内嵌 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;
}

FIDDLE

如何为悬停之前的所有星星实现此功能？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

哈哈，刚刚想通了，

我只需要在包装器上添加direction: rtl;。

FIDDLE

【讨论】：

通常，您不能选择悬停项之前的元素。这是一个很棒的解决方案！可能不会在所有情况下都有效，但对于这种特定情况，它很棒！
具体来说，之所以可行，是因为您的 .star 元素都是内联块，而您所做的只是改变这些内联的方向。当然，当您将任何文本添加到包装器的内容时，该文本将被反转，导致此解决方案失败。

【解决方案2】：

对于那些觉得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;
}

【讨论】：

虽然我的解决方案也可以满足我的需要，但这个解决方案确实感觉应该是正确的方法。谢谢。

【解决方案3】：

作为其他（好的）答案的替代方法 - 您也可以使用 transform:rotate()。

将父元素旋转-180度：

.wpr {
    transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
}

然后将子元素旋转 180 度：

.star {
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}

WORKING EXAMPLE HERE

请注意CSS3 transforms的支持。

如果这是一个问题，您也可以添加 -ms/-moz/-o 供应商前缀。

【讨论】：