CSSGAMES：純CSS實現五星評價效果

時間 2019-11-08

標籤 cssgames css 實現五星評價效果欄目 CSS 简体版

原文原文鏈接

上圖：
javascript

上代碼：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>

沒了。html

PS：大力推薦《CSS揭祕》，一本讓人鑽牛角尖不亦樂乎的書java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。