css - 在这种情况下如何为星级评分编写 CSS？

Question

陷入半星评级问题 CSS。我引用了 http://codepen.io/mrk1989/pen/mLeHJ

我的 Star 展示 Html 结构是这样的

<ul class="rateChange">
  <li>
    <input type="radio" id="rating10" name="rating" value="10" />
    <label for="rating10" title="5 stars"></label>
    <input type="radio" id="rating9" name="rating" value="9" />
    <label class="half" for="rating9" title="4 1/2 stars"></label>
  </li>
  <li>
    <input type="radio" id="rating8" name="rating" value="8" />
    <label for="rating8" title="4 stars"></label>
    <input type="radio" id="rating7" name="rating" value="7" />
    <label class="half" for="rating7" title="3 1/2 stars"></label>
  </li>
  <li>
    <input type="radio" id="rating6" name="rating" value="6" />
    <label for="rating6" title="3 stars"></label>
    <input type="radio" id="rating5" name="rating" value="5" />
    <label class="half" for="rating5" title="2 1/2 stars"></label>
  </li>
  <li>
    <input type="radio" id="rating4" name="rating" value="4" />
    <label for="rating4" title="2 stars"></label>
    <input type="radio" id="rating3" name="rating" value="3" />
    <label class="half" for="rating3" title="1 1/2 stars"></label>
  </li>
  <li>
    <input type="radio" id="rating2" name="rating" value="2" />
    <label for="rating2" title="1 star"></label>
    <input type="radio" id="rating1" name="rating" value="1" />
    <label class="half" for="rating1" title="1/2 star"></label>
  </li>
</ul>

在我的例子中，星星位于 ul li 标签下，以及我如何更改我的 css 以获得上面链接中给出的所有 css 功能(比如点击所有以前和当前的星星是打开的，悬停所有以前和当前的星星开始显示悬停效果)。

这是我正在做某事的 jsfiddle 链接 https://jsfiddle.net/ae0ypksv/没有实现全部功能。

非常感谢您的帮助..!!谢谢

Answer 1

您必须将所有输入/标签放在一个 <li> 中喜欢this

<h1>Half Star Rating Change Senirow</h1>

<ul class="rateChange">
  <li>
    <input type="radio" id="rating10" name="rating" value="10" />
    <label for="rating10" title="5 stars"></label>
    <input type="radio" id="rating9" name="rating" value="9" />
    <label class="half" for="rating9" title="4 1/2 stars"></label>

    <input type="radio" id="rating8" name="rating" value="8" />
    <label for="rating8" title="4 stars"></label>
    <input type="radio" id="rating7" name="rating" value="7" />
    <label class="half" for="rating7" title="3 1/2 stars"></label>

    <input type="radio" id="rating6" name="rating" value="6" />
    <label for="rating6" title="3 stars"></label>
    <input type="radio" id="rating5" name="rating" value="5" />
    <label class="half" for="rating5" title="2 1/2 stars"></label>

    <input type="radio" id="rating4" name="rating" value="4" />
    <label for="rating4" title="2 stars"></label>
    <input type="radio" id="rating3" name="rating" value="3" />
    <label class="half" for="rating3" title="1 1/2 stars"></label>

    <input type="radio" id="rating2" name="rating" value="2" />
    <label for="rating2" title="1 star"></label>
    <input type="radio" id="rating1" name="rating" value="1" />
    <label class="half" for="rating1" title="1/2 star"></label>
  </li>
</ul>