• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

CSS动态显示等级选择器_css

css 搞代码 7年前 (2018-06-10) 151次浏览 已收录 0个评论

 本文创意来自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>

所有CSS技巧都应用在了这张20*40PX的图片上:

CSS动态显示等级选择器_css

定义基本容器,宽度刚好够平铺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;}

IE6.0和FF1.5环境下测试成功

欢迎大家阅读《CSS动态显示等级选择器_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS动态显示等级选择器_css

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址