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

FIDDLE

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

Answer 1

哈哈，刚想通了，

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

<强> FIDDLE

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

Answer 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供应商前缀。

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

3 个答案: