悬停上的css改变盖子上的星星

Question

嘿，我有这段css，它允许我从0到5显示星星。我可以设置类来决定需要盖多少星星。如何在悬停时更改值。我试着添加了“悬停”值，但这给了我意想不到的结果。

我刚刚添加了悬浮类作为后类，因为后效是我想要完成的，但又是动态的。当这样做的时候，星星在页面的顶部盘旋，使得原来的灰色星星看不见，它并不能反映出我徘徊的星星的数量。我在css方面没有那么熟练，所以任何帮助都会成为学徒。

<style>
        .stars{
            display:block;
            width:79px;
            background-position:0 -16px;
            position:relative;

            text-indent:100%;
            white-space:nowrap;
            overflow:hidden;
        }
        .stars,
        .stars:hover,
        .stars:after{
            height:16px;
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAIAAACU62+bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAldJREFUeNqMVMuOEkEUPY0EQksHFBIHXKgxEBIW+gGYsHVhcOXCzfgp8wluTVjgxoQlP4C4x2QmhkAgRFagBmLzGKAJ2J6qAqaZ7mHm5qa4j3Nudd1bhWbbNtzy5ZlY3/90Z3we6P43rHpCe5W7Eb6f4TGE/vh4BwLL/6nhAYTSoHuMsBqL8ieAX+qJ3I1Bh2h2/QzTntBBTQQMICXRlDXQAabSTuRhPKVq9icgLlXf4dxC5hwYCvUhX8Jf4N7NaMgUAYTlSz6kT/GqhBZweTOBKQIIS5/KQx/nONCOLtF5/gGmF4FBpiT6sK1slO5F0GXKYw6jcwR2tiVVSUCmHOffT83EfdnB38AvGeHgHkEEV6ZrB14BXeIugH95vD3Hu54wLmRQx/6O7AiznhjN5Uu8ruHNV8RewHgiDLoMziVgezXUe2h/3vZKSqvFRiKTyWzLObL+q7Y6pF6vHxAcWY/3wPJTKWqf2x8Qyz+Uova5hdDv91k7IYUG3WsAbTKZMDEcDi3LUmi2IZ1Oi6O225qmGYaRTCaDwWA8Hqetlcvl0WgUkBIKhZiIRCJcxbgtazwec10sFispsVhMWy6XlUrFNM1sNuv3e7+J9XrdaDSi0WihUBBzYA1y5vN5KpVyc4judDq6rhPNncWh+UOHISaYPoK+6hKdXC7Hb91sNk4CXQaZUuiDtrJdiukkKFelrl9vNjQcDitjMBiIf5ZEgn1kkBEPAkfBtdvtspVsPG1+PVu8T3nsMJvNWJLnUwTOsVqtMnjwnfZOisVis9m0XcIgU3v3vwADALitWRkkbzItAAAAAElFTkSuQmCC);

        }
        .stars:after,.stars:hover{
            content:"";
            background-position:0 0;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
        }

        .s-0:after      { width: 0  ; }
        .s-05:after   { width: 8px; }
        .s-1:after      { width:16px; }
        .s-15:after   { width:24px; }
        .s-2:after      { width:32px; }
        .s-25:after   { width:40px; }
        .s-3:after      { width:48px; }
        .s-35:after   { width:56px; }
        .s-4:after      { width:64px; }
        .s-45:after   { width:72px; }
        .s-5:after      { width:80px; }


 .s-0:hover      { width: 0  ; }
        .s-05:hover   { width: 8px; }
        .s-1:hover      { width:16px; }
        .s-15:hover   { width:24px; }
        .s-2:hover      { width:32px; }
        .s-25:hover   { width:40px; }
        .s-3:hover      { width:48px; }
        .s-35:hover   { width:56px; }
        .s-4:hover      { width:64px; }
        .s-45:hover   { width:72px; }
        .s-5:hover      { width:80px; }

</style>



  <a href='#' > <span class="col-sm-6 stars s-0" align="center"></span></a>

Answer 1

满号星

​

$('.js-stars *').on('click', function(event) {
  var count = $(this).data('stars');
  alert(count + ' star(s) selected');
  event.stopPropagation();
});

.stars-wrapper {
  display: block;
  width: 80px;
  float: left;
  cursor: pointer;
}
.stars {
  display: block;
  float: right;
  width: 16px;
  height: 16px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAIAAACU62+bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAldJREFUeNqMVMuOEkEUPY0EQksHFBIHXKgxEBIW+gGYsHVhcOXCzfgp8wluTVjgxoQlP4C4x2QmhkAgRFagBmLzGKAJ2J6qAqaZ7mHm5qa4j3Nudd1bhWbbNtzy5ZlY3/90Z3we6P43rHpCe5W7Eb6f4TGE/vh4BwLL/6nhAYTSoHuMsBqL8ieAX+qJ3I1Bh2h2/QzTntBBTQQMICXRlDXQAabSTuRhPKVq9icgLlXf4dxC5hwYCvUhX8Jf4N7NaMgUAYTlSz6kT/GqhBZweTOBKQIIS5/KQx/nONCOLtF5/gGmF4FBpiT6sK1slO5F0GXKYw6jcwR2tiVVSUCmHOffT83EfdnB38AvGeHgHkEEV6ZrB14BXeIugH95vD3Hu54wLmRQx/6O7AiznhjN5Uu8ruHNV8RewHgiDLoMziVgezXUe2h/3vZKSqvFRiKTyWzLObL+q7Y6pF6vHxAcWY/3wPJTKWqf2x8Qyz+Uova5hdDv91k7IYUG3WsAbTKZMDEcDi3LUmi2IZ1Oi6O225qmGYaRTCaDwWA8Hqetlcvl0WgUkBIKhZiIRCJcxbgtazwec10sFispsVhMWy6XlUrFNM1sNuv3e7+J9XrdaDSi0WihUBBzYA1y5vN5KpVyc4judDq6rhPNncWh+UOHISaYPoK+6hKdXC7Hb91sNk4CXQaZUuiDtrJdiukkKFelrl9vNjQcDitjMBiIf5ZEgn1kkBEPAkfBtdvtspVsPG1+PVu8T3nsMJvNWJLnUwTOsVqtMnjwnfZOisVis9m0XcIgU3v3vwADALitWRkkbzItAAAAAElFTkSuQmCC) no-repeat 0 -16px;
}
.stars:hover {
  background-position: 0 0;
}
.stars--one {
  width: 16px;
}
.stars--two {
  width: 32px;
}
.stars--three {
  width: 48px;
}
.stars--four {
  width: 64px;
}
.stars--five {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stars-wrapper js-stars">
  <span class="stars stars--five" data-stars="1">
<span class="stars stars--four" data-stars="2">
<span class="stars stars--three" data-stars="3">
<span class="stars stars--two" data-stars="4">
<span class="stars stars--one" data-stars="5">
</span>
  </span>
  </span>
  </span>
  </span>
</div>

​

我在这里使用JavaScript来检测所选恒星的计数。星星是用纯CSS突出显示的。

软星选择

​

$('.stars').on('mouseover mousemove', function(event) {
  var x = event.pageX - $(this).offset().left;
  $(this).find('.stars__selection').width(x);
}).on('mouseout', function() {
  $(this).find('.stars__selection').width(0);
}).on('click', function(event) {
  var x = event.pageX - $(this).offset().left;
  $(this).find('.stars__selection').width(x);
  var width = $(this).width();
  var result = Math.round(x / width * 100); // in percent
  alert(result + '% selected');
});

.stars,
.stars__selection {
  display: block;
  width: 80px;
  height: 16px;
  cursor: pointer;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAIAAACU62+bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAldJREFUeNqMVMuOEkEUPY0EQksHFBIHXKgxEBIW+gGYsHVhcOXCzfgp8wluTVjgxoQlP4C4x2QmhkAgRFagBmLzGKAJ2J6qAqaZ7mHm5qa4j3Nudd1bhWbbNtzy5ZlY3/90Z3we6P43rHpCe5W7Eb6f4TGE/vh4BwLL/6nhAYTSoHuMsBqL8ieAX+qJ3I1Bh2h2/QzTntBBTQQMICXRlDXQAabSTuRhPKVq9icgLlXf4dxC5hwYCvUhX8Jf4N7NaMgUAYTlSz6kT/GqhBZweTOBKQIIS5/KQx/nONCOLtF5/gGmF4FBpiT6sK1slO5F0GXKYw6jcwR2tiVVSUCmHOffT83EfdnB38AvGeHgHkEEV6ZrB14BXeIugH95vD3Hu54wLmRQx/6O7AiznhjN5Uu8ruHNV8RewHgiDLoMziVgezXUe2h/3vZKSqvFRiKTyWzLObL+q7Y6pF6vHxAcWY/3wPJTKWqf2x8Qyz+Uova5hdDv91k7IYUG3WsAbTKZMDEcDi3LUmi2IZ1Oi6O225qmGYaRTCaDwWA8Hqetlcvl0WgUkBIKhZiIRCJcxbgtazwec10sFispsVhMWy6XlUrFNM1sNuv3e7+J9XrdaDSi0WihUBBzYA1y5vN5KpVyc4judDq6rhPNncWh+UOHISaYPoK+6hKdXC7Hb91sNk4CXQaZUuiDtrJdiukkKFelrl9vNjQcDitjMBiIf5ZEgn1kkBEPAkfBtdvtspVsPG1+PVu8T3nsMJvNWJLnUwTOsVqtMnjwnfZOisVis9m0XcIgU3v3vwADALitWRkkbzItAAAAAElFTkSuQmCC) 0 -16px;
}
.stars__selection {
  width: 0;
  background-position: 0 0;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stars">
  <div class="stars__selection"></div>
</div>

​

没有JavaScript，这个解决方案就无法工作。有一个问题:很难选择100%或0% :)