CSS制作星级评分效果

2014-09-24阅读(5906)评论(0)牵着狗狗看MM

苏州实时公交查询

下图是Demo中会用到的图,可右键另存
stars

HTML Code

[html]
<ul class="rating nostar">
<li class="one"><a href="#" title="1 Star">1</a>
</li>
<li class="two"><a href="#" title="2 Stars">2</a>
</li>
<li class="three"><a href="#" title="3 Stars">3</a>
</li>
<li class="four"><a href="#" title="4 Stars">4</a>
</li>
<li class="five"><a href="#" title="5 Stars">5</a>
</li>
</ul>

[/html]

CSS Code

[css].rating {
width: 124px;
height: 19px;
margin: 0 0 20px 0;
padding: 0;
list-style: none;
clear: both;
position: relative;
background: url(https://www.w3cways.com/wp-content/uploads/2014/09/stars.png) no-repeat 0 0;
}
.nostar {
background-position: 0 0
}
.onestar {
background-position: 0 -19px
}
.twostar {
background-position: 0 -38px
}
.threestar {
background-position: 0 -57px
}
.fourstar {
background-position: 0 -76px
}
.fivestar {
background-position: 0 -95px
}
ul.rating li {
cursor: pointer;
float: left;
text-indent: -999em;
}
ul.rating li a {
position: absolute;
left: 0;
top: 0;
width: 25px;
height: 19px;
text-decoration: none;
z-index: 200;
}
ul.rating li.one a {
left: 0
}
ul.rating li.two a {
left: 25px;
}
ul.rating li.three a {
left: 50px;
}
ul.rating li.four a {
left: 75px;
}
ul.rating li.five a {
left: 100px;
}
ul.rating li a:hover {
z-index: 2;
width: 125px;
height: 19px;
overflow: hidden;
left: 0;
background: url(https://www.w3cways.com/wp-content/uploads/2014/09/stars.png) no-repeat 0 0
}
ul.rating li.one a:hover {
background-position: 0 -19px;
}
ul.rating li.two a:hover {
background-position: 0 -38px;
}
ul.rating li.three a:hover {
background-position: 0 -57px
}
ul.rating li.four a:hover {
background-position: 0 -76px
}
ul.rating li.five a:hover {
background-position: 0 -95px
}
[/css]
这样就基本实现了鼠标hover显示对应的星级,后面再增加点JS来实现click效果就可以啦

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » CSS制作星级评分效果
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏