选择所有项目之前悬停项目 [英] Select all items before hovered item

问题描述

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

这篇关于选择所有项目之前悬停项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！