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

本文介绍了选择所有项目之前悬停项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I have a container with 5 inline stars.

我需要的是当你将星星，星星和所有星星移到不同的背景。 （我使用sprite，所以我为此改变背景位置）

What I need is when you hover over a star, that star and all the stars before it get a different background . (I'm using a sprite so I change the background position for this)

标记：

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

如果我使用同级组合器（〜），我会得到相反的效果。

If I use the sibling combinator (~) I get the reverse effect.

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

FIDDLE

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

How can I implement this for the all the stars before the hovered one?

推荐答案

对于任何认为 direction：rtl 旨在调整一组星级评分图标），我建议将星星漂移到右侧，而不是：

For anyone who feels that direction: rtl is too hacky (because it was never really designed to align a group of star rating icons), I recommend floating the stars to the right instead:

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

因为包装器是一个内联块本身， -fit。

Since the wrapper is an inline block itself anyway, it will still shrink-to-fit.

对于这一点，您甚至可以如果您确定憎恨内联块并希望将其完全丢弃，请同时浮动封装：

For that matter, you can even float the wrapper as well if you decide that you really hate inline blocks and want to ditch them entirely:

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