CSS制作星级评分效果

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

苏州实时公交查询

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

HTML Code

<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>

CSS Code

.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
}

这样就基本实现了鼠标hover显示对应的星级,后面再增加点JS来实现click效果就可以啦

Demo

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

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

支付宝扫一扫打赏

微信扫一扫打赏