我正在制作一个投票系统,这是我的代码。它在 Firefox 下工作正常,但它在 Chrome 下无法正常工作,我不知道它有什么问题。 在 Firefox 下,当您将鼠标悬停在每个方 block 上时,会选择前一个方 block 。 在 Chrome 下选择第一个,您需要指向第二个方 block ,依此类推。 还有一件事,如果您点击第五个框,尽管它没有着色,但链接有效。
<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;
}
干杯
最佳答案
这似乎是由于将单选按钮的显示类型更改为 none
而 Chrome 不知道为隐藏元素触发 :hover
。
作为替代方案,您可以为 label
使用 :hover
伪类。
label:hover,
label:hover ~ label {
width: 23px;
height: 23px;
background-color: green;
display: inline-block;
padding: 0;
margin: 0;
}
关于CSS Sibling 选择器在 Chrome 下出现故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22114550/