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

我需要的是，当你将鼠标悬停在明星，星星和所有星星上，然后才能获得不同的背景。（我使用的是一个精灵，所以我改变了这个背景位置）

标记：

<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

我怎样才能实现这个为悬停一个之前所有的星星？

来源

2014-03-06 Danield

任何人谁认为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; 
}

来源

2014-03-07 02:06:07 BoltClock

尽管我的解决方案也适用于我所需的解决方案，但此解决方案确实觉得它应该完成的正确方式。谢谢。 – Danield

大声笑，只是理解了它，

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

FIDDLE

来源

2014-03-06 13:37:09 Danield

通常，您不能选择悬停项目之前的元素。这是一个很棒的解决方案！可能不会在所有情况下都能正常工作，但对于这种特殊情况而言，它非常棒！ – LinkinTED

打我吧，哈哈。解决了它！ –

具体来说，这个工程的原因是因为你的'.star'元素都是内联块，你所做的只是改变这些内联方向。当然，当你将任何文本添加到包装的内容时，该文本将被颠倒，导致此解决方案失败。 – BoltClock

作为替代其他（好）答案 - 你能也使用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供应商的前缀。

来源

2014-03-07 02:20:04

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

回答

相关问题