CSS Sibling 选择器在 Chrome 下出现故障

Question

我正在制作一个投票系统，这是我的代码。它在 Firefox 下工作正常，但它在 Chrome 下无法正常工作，我不知道它有什么问题。在 Firefox 下，当您将鼠标悬停在每个方 block 上时，会选择前一个方 block 。在 Chrome 下选择第一个，您需要指向第二个方 block ，依此类推。还有一件事，如果您点击第五个框，尽管它没有着色，但链接有效。

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 而 Chrome 不知道为隐藏元素触发 :hover。

作为替代方案，您可以为 label 使用 :hover 伪类。

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

Working Demo .