点亮星星动态条

最新推荐文章于 2022-04-05 19:56:11 发布

weixin_30768661

最新推荐文章于 2022-04-05 19:56:11 发布

阅读量136

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jellyAndjammy/p/4143218.html

版权

这个是评价时点亮星星，当你鼠标在第n颗星悬浮时，就会点亮前面的n颗星。效果如下图：

一、html代码：

<body>
    <ul>
        <li class="star1"></li>
        <li class="star2"></li>
        <li class="star3"></li>
        <li class="star4"></li>
        <li class="star5"></li>    
    </ul>
</body>

二、css样式：

<style type="text/css">
        *{
            margin: 0; 
            padding: 0;
        }
        ul{
            width: 95px;
            position: relative;
            font-size: 0;
            background: url('images/stars.png') 0 -20px;
            height: 19px;
        }
        li{
            position: absolute;
            height: 19px;
            top: 0;
            left: 0;
            list-style-type: none;
            display: inline-block;
        }
        .star1{
            width: 20%;
            z-index: 10;
        }
        .star2{
            width: 40%;
            z-index: 8;
        }
        .star3{
            width: 60%;
            z-index: 6;
        }
        .star4{
            width: 80%;
            z-index: 4;
        }
        .star5{
            width: 100%;
            z-index: 2;
        }
        li:hover{
            background: url('images/laughStar.png') repeat-x;
        }
    </style>