本文创意来自Komodo Media,使用偏移替换背景图已经不是新鲜用法,不过能把技巧和应用结合的如此完美倒很少见。
本方案就是采用纯css实现人工选择评级时,能动态的显示出选择状态,并且支持链接。
Demo http://www.rexsong.com/blog/attachments/200601/13_011003_ratings_selector.htm
结构代码简单的不能再简单:
<ul class=”star”>
<li><a href=”#” title=”Rate this 1 star out of 5″ class=”one-star”> </a></li>
<li><a href=”#” title=”Rate this 2 stars out of 5″ class=”two-stars”> </a></li>
<li><a href=”#” title=”Rate this 3 stars out of 5″ class=”three-stars”> </a></li>
<li><a href=”#” title=”Rate this 4 stars out of 5″ class=”four-stars”> </a></li>
<li><a href=”#” title=”Rate this 5 stars out of 5″ class=”five-stars”> </a></li>
</ul>
<li><a href=”#” title=”Rate this 1 star out of 5″ class=”one-star”> </a></li>
<li><a href=”#” title=”Rate this 2 stars out of 5″ class=”two-stars”> </a></li>
<li><a href=”#” title=”Rate this 3 stars out of 5″ class=”three-stars”> </a></li>
<li><a href=”#” title=”Rate this 4 stars out of 5″ class=”four-stars”> </a></li>
<li><a href=”#” title=”Rate this 5 stars out of 5″ class=”five-stars”> </a></li>
</ul>
所有CSS技巧都应用在了这张20*40PX的图片上: