レーティングのナビゲーション
カーソルがあたるとレーティング用のインターフェース(☆)が見えて、カーソル位置(画像の場合4)までの星を付けられるというのを実装してみた。
※画像は開発中のものです
入れ子が激しくてなんか嫌な感じだが...、他に良い案があったら教えてください。
<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; }