CSS动态显示等级选择器
点击次数：26 次 发布日期：2008-11-26 22:54:36 作者：源代码网
|
源代码网推荐 源代码网推荐本方案就是采用纯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> 源代码网推荐所有CSS技巧都应用在了这张20*40PX的图片上： 源代码网推荐 源代码网推荐  源代码网推荐定义基本容器，宽度刚好够平铺5个图片，高度只显示图片上半部分未选中状态： 源代码网推荐 .star { list-style:none; position:relative; margin:0; padding:0; width:100px; height:20px; 源代码网推荐background:url(13_010531_star_rating.gif) top left repeat-x;} 源代码网推荐定义每个单元，及触发显示图片下半部分选中状态，注意要采用绝对定位方法： 源代码网推荐 .star li a { display:block; width:20px; height:20px; z-index:2; position:absolute; padding:0;} 源代码网推荐.star li a:hover { background:url(13_010531_star_rating.gif) bottom left; z-index:1; left:0;} 源代码网推荐最后就是分别定义每个单元格的偏移量，和链接触发可控制宽度： 源代码网推荐 .star a.one-star { left:0;} 源代码网推荐 .star a.one-star:hover { width:20px;} 源代码网推荐.star a.two-stars { left:20px;} 源代码网推荐 .star a.two-stars:hover { width:40px;} 源代码网推荐.star a.three-stars { left:40px;} 源代码网推荐 .star a.three-stars:hover { width:60px;} 源代码网推荐.star a.four-stars { left:60px;} 源代码网推荐 .star a.four-stars:hover { width:80px;} 源代码网推荐.star a.five-stars { left:80px;} 源代码网推荐 .star a.five-stars:hover { width:100px;} 源代码网供稿. |
