以前的沙發選擇器的多種顏色

我想創建自己的排名系統。我有5個類（每個定義一個fontello圖標「星級」的評級）。例如，當我選擇第三顆星 - 它應該改變自己，並將所有以前的圖標改變爲黃色的collow。第五個=所有綠色的星星等。另外應該出現如下例所示的文字。以前的沙發選擇器的多種顏色

我發現幾個解決方案（如that fiddle），但他們都只在一個類上使用一種顏色。

我需要使用不同類將有效分數插入我的數據庫。是否有可能沒有JavaScript？

.txt_star1, .txt_star2, .txt_star3, .txt_star4, .txt_star5 
 
{ 
 
    display: none; 
 
}

<a class = "star1">ICO1</a> 
 
<a class = "star2">ICO2</a> 
 
<a class = "star3">ICO3</a> 
 
<a class = "star4">ICO4</a> 
 
<a class = "star5">ICO5</a> 
 
<div class = "txt_star1">Very bad</div> 
 
<div class = "txt_star2">Bad</div> 
 
<div class = "txt_star3">Passable</div> 
 
<div class = "txt_star4">Good</div> 
 
<div class = "txt_star5">Excellent</div>

來源

2016-12-03 Atex

沒有，沒有任何「兄弟選擇之前」。我認爲你只能用Javascript來做到這一點。 –

這個鏈接可以幫助你http://stackoverflow.com/questions/40943254/multiple-colors-of-previous-silbing-selector...But但我懷疑它不能沒有javascript的支持完成 – Geeky

@Geeky - 你發佈的鏈接那個線程。看看下面 - Gerrit0使用獨立的CSS解決了這個問題。 – Atex

如果你是開放在HTML這是相當簡單的事情，你可以使用:nth-child(n)與~一起上色您的項目扭轉你的項目的順序。唯一的缺點是CSS有點冗長。

.stars { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    cursor: pointer; 
 
    width: 230px; 
 
    background: black; 
 
    color: white; 
 
} 
 

 
.star { 
 
    padding: 5px; 
 
} 
 

 
.star:nth-child(5):hover, 
 
.star:nth-child(5):hover ~ .star { 
 
    color: red; 
 
} 
 

 
.star:nth-child(4):hover, 
 
.star:nth-child(4):hover ~ .star { 
 
    color: blue; 
 
} 
 

 
.star:nth-child(3):hover, 
 
.star:nth-child(3):hover ~ .star { 
 
    color: green; 
 
} 
 

 
.star:nth-child(2):hover, 
 
.star:nth-child(2):hover ~ .star { 
 
    color: orange; 
 
} 
 

 
.star:nth-child(1):hover, 
 
.star:nth-child(1):hover ~ .star { 
 
    color: yellow; 
 
}

<div class="stars"> 
 
    <span class="star">ICO5</span> 
 
    <span class="star">ICO4</span> 
 
    <span class="star">ICO3</span> 
 
    <span class="star">ICO2</span> 
 
    <span class="star">ICO1</span> 
 
</div>

來源

2016-12-03 02:45:40 Gerrit0

似乎OP想要這個改變發生在點擊事件上，而不是懸停。雖然這裏有趣的想法。 – andi

@andi，我假設盤旋是打算作爲提琴連接使用懸停 – Gerrit0

@ Gerrit0 - 是的，你認爲是正確的。它按我的意願工作。非常感謝你。 – Atex

以前的沙發選擇器的多種顏色

回答

相關問題