CSS懸停在元素之前

我想通過CSS創建星級評分。當用戶將鼠標懸停在最後一顆星星上時，該星星之前的所有星星必須具有其他顏色，例如：我將懸停minStar3，然後minStar1，minStar2和minStar3必須具有不同的顏色。CSS懸停在元素之前

<i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i> 
<i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i> 
<i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i> 
<i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i> 
<i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i>

來源

2016-09-15 DonLeo

你可以反對使用小jQuery腳本來實現這一目標？ – Frits

如果有可能只使用CSS，我只想使用它。 – DonLeo

您可以用Flexbox創建此，改變要素的順序與flex-direction: row-reverse。您還可以使用~常規兄弟選擇器來選擇所有在復位元素之後出現的兄弟元素。

.rating { 
 
    display: inline-flex; 
 
    flex-direction: row-reverse; 
 
} 
 
i { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
    transition: all 0.3s ease-in; 
 
} 
 
i:hover ~ i, 
 
i:hover { 
 
    background: black; 
 
}

<div class="rating"> 
 
    <i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
    <i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
    <i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
    <i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
    <i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i> 
 
</div>

來源

2016-09-15 12:29:34

這幾乎是完美的，但我的星星可以點擊，之後，所有星星點擊之前，它們是不同的顏色（我給他們新班=「閃耀」）。當我實施你的解決方案時，即使不懸停，我的顏色也會反轉。 – DonLeo

@DonLeo你能告訴我，在小提琴嗎？ –

https://jsfiddle.net/093ob2os/ 現在，應該閃耀的「星星」在右側，而不是在左側。 – DonLeo

我看這招之前這裏SO，但不能找回來。

爲此，請反轉恆星的順序。
將它們包裝在一個元素中（如p或div）
給這個包裝direction: rtl。

通過反轉方向，可以使用~兄弟選擇器。

i { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: green; 
 
} 
 

 
p { 
 
    text-align: left; 
 
    direction: rtl; 
 
} 
 
p>i:hover, 
 
p>i:hover~i { 
 
    background: red; 
 
}

<p> 
 
    <i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true">5</i> 
 
    <i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true">4</i> 
 
    <i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true">3</i> 
 
    <i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true">2</i> 
 
    <i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true">1</i> 
 
</p>

來源

2016-09-15 12:30:25 LinkinTED

CSS懸停在元素之前

回答

相關問題