江戸一番のジャスタウェイ職人のブログ

江戸一番のジャスタウェイ職人

レーティングのナビゲーション

カーソルがあたるとレーティング用のインターフェース(☆)が見えて、カーソル位置(画像の場合4)までの星を付けられるというのを実装してみた。
f:id:s-aska:20130222144903p:plain
※画像は開発中のものです

入れ子が激しくてなんか嫌な感じだが...、他に良い案があったら教えてください。

<span class="star">
  <span>
    <i class="icon-star-empty"></i>
    <span>
      <i class="icon-star-empty"></i>
      <span>
        <i class="icon-star-empty"></i>
        <span>
          <i class="icon-star-empty"></i>
          <span>
            <i class="icon-star-empty"></i>
          </span>
        </span>
      </span>
    </span>
  </span>
</span>
/* 基本非表示 */
ul.task .star i.icon-star-empty {
	opacity: 0;
}
/* その行にフォーカスがあたると薄く表示 */
ul.task li:hover .star i {
	opacity: 0.3;
}
/* カーソルが当たっている星までが濃く表示 */
ul.task .star span:hover > i {
	opacity: 1;
}