Chrome瀏覽器的CSS兄弟選擇器出現故障

Question

我正在進行投票系統，這是我的代碼。它在Firefox下工作正常，但在Chrome下無法正常工作，我不知道它有什麼問題。 在Firefox瀏覽器中，當您將鼠標懸停在每個正方形上時，會選擇前一個。 在Chrome中選擇第一個，你需要指向第二個方塊，依此類推。 還有一件事，如果您點擊第五個框，儘管它沒有着色鏈接正在工作。

http://jsfiddle.net/SV8Dh/

<div id="vote-stars"> 

    <input type="radio" name="stars" id="5" class="but" value="5" /> 
    <label for="5">5</label> 

    <input type="radio" name="stars" id="4" class="but" value="4" /> 
    <label for="4">4</label> 

    <input type="radio" name="stars" id="3" class="but" value="3" /> 
    <label for="3">3</label> 

    <input type="radio" name="stars" id="2" class="but" value="2" /> 
    <label for="2">2</label> 

    <input type="radio" name="stars" id="1" class="but" value="1" /> 
    <label for="1">1</label>    

</div> 

一些CSS：

input[type="radio"]{ 
    display:none; 
} 

.but + label 
{ 
    width: 23px; 
    height: 23px; 
    background-color:gray; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    float: left; 
    border:1px; 
    border-style: groove; 
    border-color: yellow; 
} 

.but:hover + label, 
.but:hover ~ .but + label, 
.but:hover ~ label { 
    width: 23px; 
    height: 23px; 
    background-color:green; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    margin: 0px; 

} 
.but:checked + label, 
.but:checked ~ .but + label, 
.but:checked ~ label { 
    width: 23px; 
    height: 23px; 
    background-color:green; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    margin: 0px; 
    border:2px; 
    border-style: groove; 
    border-color: green; 
} 

乾杯

Answer 1

看來，這是通過改變無線電按鈕的顯示類型，以none引起和鉻不知道觸發:hover爲隱藏的元素。

作爲替代方案，您可以使用:hover虛擬類替代label。

label:hover, 
label:hover ~ label { 
    width: 23px; 
    height: 23px; 
    background-color: green; 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

Working Demo。

Answer 2

或者您可以簡單地將Radio Button更改爲可見性：隱藏;