CSSGAMES：纯CSS实现五星评价效果

2019年9月7日 50次阅读 来源: Apo_conquest

上图：
《CSSGAMES：纯CSS实现五星评价效果》

上代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .container{
      width: 150px;
      height: 30px;
      position: relative;
    }
    .container ul{
      margin: 0;
      padding: 0;
      position: absolute;
      list-style: none;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .container li{
      z-index: 1;
      width: 20%;
      height: 100%;
      float: left;
      background: #faf;
      border-radius: 50%;
      /*box-shadow: 2px red inset;*/
    }
    .container li:hover+span{
      display: block;
      z-index: 99;
      width: 500%;
      height: 100%;
      float: left;
      background: #afa;
    }
    span.show{
      display: block;
      z-index: 99;
      width: 500%;
      height: 100%;
      float: left;
      background: #afa;
    }
    .backer{
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .backer li{
      background: #999;
    }
</style>
  </head>
  <body>
    <form class="" action="" method="post">
      <input type="text" name="star" value="5" style="display:none">
    </form>
    <div class="container">
    <div class="backer">
        <ul>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
        </ul>
    </div>
    <ul>
        <li class="li1"></li><span></span>
        <li class="li2"></li><span></span>
        <li class="li3"></li><span></span>
        <li class="li4"></li><span></span>
        <li class="li5"></li><span></span>
    </ul>
</div>
<div>another div </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">
    var spans=[];
    var form =$("form")
    $(".container li").on("click",function(e){
      console.log(e.target.className.split("i")[1]);
      // form.star.value=e.target.className.split("i")[1];
      console.log($("."+e.target.className).next());
      $("."+e.target.className).next().addClass("show");
      spans=$("span.show");
    })
    $(".container ul").mouseenter(function(){
      if(spans.length>0)spans.removeClass("show");
      console.log(spans);
    })
    $(".container ul").mouseleave(function(){
      spans.addClass("show")
    })
    </script>
  </body>
</html>

没了。

PS：大力推荐《CSS揭秘》，一本让人钻牛角尖不亦乐乎的书

    原文作者：Apo_conquest
    原文地址: https://segmentfault.com/a/1190000008963486
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞