CSS同级选择器在Chrome下出现故障

我正在制定投票制度，这是我的密码。它在Firefox下工作正常，但在Chrome下工作不正常，我不知道它有什么问题。 在Firefox下，当您将鼠标悬停在每个方块上时，会选中上一个方块。 在Chrome下选择第一个，你需要指向第二个正方形，依此类推。 还有一件事，如果你点击第五个框，尽管它没有颜色，链接仍在工作

---

欢呼声

似乎是由于将单选按钮的显示类型更改为

无

而Chrome不知道如何触发隐藏元素的

：悬停

或者，您可以使用

：hover

伪类代替

标签

标签：悬停，
标签：悬停~标签{
宽度：23px；
高度：23px；
背景颜色：绿色；
显示：内联块；
填充：0；
保证金：0；
}

---

或者您可以简单地将单选按钮更改为可见性：隐藏

Chrome还有这个问题吗？太棒了。是的，检查它在FF下的行为，然后在Chrome下查看差异。回答很好！非常感谢我的朋友！：）

<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>

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;
}