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而导致Chrome无法为隐藏元素触发: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

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

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

2 个答案: