我有一个有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; }更多推荐
选择所有项目之前悬停项目
发布评论