選擇所有項目之前懸停的項目

我需要的是，當你將鼠標懸停在明星，星星和所有星星上，然後才能獲得不同的背景。（我使用的是一個精靈，所以我改變了這個背景位置）

標記：

<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

選擇所有項目之前懸停的項目

回答

相關問題