带有单选按钮的 CSS 星级评级

Question

我正在开发一个带有收音机的 CSS 星级评级系统。 但是我似乎无法弄清楚我在这里做错了什么......当我点击时它似乎突出显示......但当我悬停时它应该突出显示。

<fieldset>    
<input type="radio" id="star-5" name="rating-01" value="5"><label for="star-5"></label>
    <input type="radio" id="star-4" name="rating-01" value="4"><label for="star-4"></label>
    <input type="radio" id="star-3" name="rating-01" value="3"><label for="star-3"></label>
    <input type="radio" id="star-2" name="rating-01" value="2"><label for="star-2"></label>
    <input type="radio" id="star-1" name="rating-01" value="1"><label for="star-1"></label>
</fieldset>


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

input[type=radio] + label {
    position: relative; float: right; clear: none; display: block;
    width: 18.4%; height: 120px; margin: 0 1% 0 1%; padding: 0;
    outline: 0; cursor: pointer; 

    background-color: green;
}
input[type=radio]#star-1 + label { margin: 0 1% 0 0; } input[type=radio]#star-5 + label { margin: 0 0 0 1%; }

input[type=radio]:hover + label,
  input[type=radio]:hover + label ~ input[type=radio] + label {
      background-color: red;
}

---

更新

---

这就是我到目前为止所做的事情：JSFiddle;

CSS：

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

input[type=radio] + label {
    position: relative; float: right; clear: none; display: block;
    width: 18.4%; height: 120px; margin: 0 1% 0 1%; padding: 0;
    outline: 0; cursor: pointer; background-color: green;
}
input[type=radio]#star-1 + label { margin: 0 1% 0 0; } input[type=radio]#star-5 + label { margin: 0 0 0 1%; }

fieldset > input[type=radio]:checked ~ label {
    background-color: blue;
}

fieldset:hover > input[type=radio] + label:hover,
fieldset:hover > input[type=radio] + label:hover ~ label {
    background-color: gold;
}

但是仍然存在问题...当您选择这些框时，它们会变成蓝色。并且您将鼠标悬停在蓝色停留处，而悬停在上方的部分为黄色。

鼠标悬停后如何重置蓝色？

Answer 1

我很久以前就创造了一些东西。还有javascript，用于计算总票数。

Fiddle example

代码片段：

function showme(id) {
    document.getElementById('result').innerHTML = 'My vote : '+id.value;
    var r = document.getElementById('res').value.split(',');
    var s='';
    for(var i=0;i<5;i++) {
      if(id.value==(i+1).toString()) {
        var x = parseInt(r[i])+1;
        r[i]=x.toString();
      }
      if(i==4) {s+=r[i];} else {s+=r[i]+',';}
    }
    document.getElementById('res').value=s;
    calc();
  }
  function calc() {
    var x=document.getElementById('res').value.split(',');
    var r=0;
    var t=0;
    for(var i=0;i<5;i++) {
      t+=parseInt(x[i]);
      r+=(parseInt(x[i])*(i+1));
    }
    var s=parseInt((r/t)*20);
    document.getElementById('bar').style.width=s.toString()+'%';
    document.getElementById('sta').innerHTML=s.toString()+'%';
  }

 #divRateCnt {
    width: 130px;
    position: relative;
}

#divRareCnt, #divStarsCnt{
    height: 26px;
    background: url(http://s4.postimg.org/wi683zp2h/stars.png) 0 0px repeat-x;
}

#divRateCnt input{
    display: none;
}

#divRateCnt label{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    width: 130px;
    cursor: pointer;
}
#divRateCnt:hover label{
    display: block;
}
#divRateCnt label:hover{
    background: url(http://s4.postimg.org/wi683zp2h/stars.png) 0 -52px repeat-x;
}

#divRateCnt label + input + label{width: 104px;}
#divRateCnt label + input + label + input + label{width: 78px;}
#divRateCnt label + input + label + input + label + input + label{width: 52px;}
#divRateCnt label + input + label + input + label + input + label + input + label{width: 26px;}

#divRateCnt input:checked + label{
    display: block;
    background: url(http://s4.postimg.org/wi683zp2h/stars.png) 0 -52px repeat-x;
}

<input type="hidden" value="0,0,0,0,0" id="res" />
 <div id="divRateCnt">
  <div id="divStarsCnt"></div>
  <input type="radio" name="rating" id="star5" value="5" onchange="showme(this);"><label for="star5"></label>
  <input type="radio" name="rating" id="star4" value="4" onchange="showme(this);"><label for="star4"></label>
  <input type="radio" name="rating" id="star3" value="3" onchange="showme(this);"><label for="star3"></label>
  <input type="radio" name="rating" id="star2" value="2" onchange="showme(this);"><label for="star2"></label>
  <input type="radio" name="rating" id="star1" value="1" onchange="showme(this);"><label for="star1"></label>
 </div>
 <br>
 <span id="result"></span>
 <br><br>
 Total vote(s) :<br>
 <div style="width:130px;height:26px;background:url(http://s4.postimg.org/wi683zp2h/stars.png) 0 0 repeat-x;position:relative;">
  <div id="bar" style="width:130px;height:26px;background:url(http://s4.postimg.org/wi683zp2h/stars.png) 0 -26px repeat-x;position:absolute;top:0;left:0;width:0%;"></div>
 </div>
 <span id="sta"></span>

Answer 2

https://jsfiddle.net/ypne7t2w/1/

这会在悬停字段集时重置标签颜色，但不针对标签悬停：

fieldset:hover > input[type=radio] + label,
fieldset:hover > input[type=radio] + label ~ label {
    background-color: green;
}

Answer 3

给你。可能是您能想到的最简单的纯 CSS 解决方案。

HTML

<div class="stars">
  <input type="radio" id="rate-5" name="rating-1">
  <label for="rate-5"></label>
  <input type="radio" id="rate-4" name="rating-1">
  <label for="rate-4"></label>
  <input type="radio" id="rate-3" name="rating-1">
  <label for="rate-3"></label>
  <input type="radio" id="rate-2" name="rating-1">
  <label for="rate-2"></label>
  <input type="radio" id="rate-1" name="rating-1">
  <label for="rate-1"></label>
</div>

CSS

.stars {
  float: left;
  overflow: hidden;
  width: 100%;
}
.stars input[type=radio]:checked ~ label:after {
  background: blue;
}
.stars input[type=radio] {
  display: none;
}
.stars input[type=radio]:first-child + label {
  padding-right: 0;
}
.stars:hover input[type=radio]:checked ~ label:after,
.stars label:after {
  background: green;
}
.stars label {
  box-sizing: border-box;
  width: 20%;
  padding-right: 2%;
  height: 120px;
  float: right;
  cursor: pointer;
}
.stars label:after {
  display: block;
  content: "";
  height: 120px;
  width: 100%;
  float: right;
  transition: all 0.25s;
  background: green;
}
.stars label:hover:after,
.stars label:hover ~ label:after {
  background: gold !important;
}

https://jsfiddle.net/rsyfchfo/

希望这会有所帮助:)

[更新]添加了“悬停时重置选择”。

[update2]添加了悬停在星星之间的空白处。