CSS制作星级评分效果

POST TIME: 2014-10-18 20:02:26

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

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(http://www.ynmvc.com/Public/Images/ok.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(http://www.ynmvc.com/Public/Images/ok.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效果就可以啦

实例: CSS制作星级评分效果 -- 云南高端网站建设-昆明锦华科技

« CSS制作星级评分效果

文章转载请注明出处:https://ynxy999.com/Article/view/id/1728.shtml

微信公众号运营中能留住用户的那些小心机出门旅行能使人改变吗?

告诉我们您的需求

 我们将在一个工作日之内回复您
昆明地址:新闻路429号文化空间25层1055711410
安宁地址:安宁市县街镇麒麟路17号云南经济管理学院图书馆406室、305室ynxy999_com
免费热线:15287195860
售前热线:0871-68034467-999

Copyright 2011-2019,All Rights Reserved ynxy999.com co.ltd.云南炫烨科技有限公司 Powered by ynxy999.com 滇公网安备 53010202000225号  滇ICP备15002943号  [技术支持昆明锦华科技]