0

星半分の評価の問題 CSS で立ち往生。http://codepen.io/mrk1989/pen/mLeHJから参照します

スターを表示するための私の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 機能を取得する方法 (前のすべての星と現在の星をクリックするとオンになり、すべての星をホバーすると前と現在の開始がホバリングを表示するようになります)効果）。

これは、 https: //jsfiddle.net/ae0ypksv/を実行している jsfiddle リンクであり、 完全な機能を達成していません。

助けていただければ幸いです..!! ありがとう

4

2 に答える 2

1

この<li>ように、すべての入力/ラベルを1つの中に入れる必要があります 

<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>
于 2016-07-01T05:40:38.510 に答える