Question

嘿所有我有这块css，它允许我显示从0到5的星星。我可以设置班级来确定需要盖上多少星星。如何更改悬停时的值。我尝试添加：悬停值，但这给了我意想不到的结果。

我刚刚将hover类添加为后续类，因为后续效果是我想要完成但后来动态地完成。当这样做时，星星在页面顶部盘旋，使得原始的灰色恒星不可见，并且它不会反映我徘徊的恒星数量。我不是那么熟练的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

全明星

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

$('.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');
});

＆＃13;

我在这里使用JavaScript来检测所选星星的数量。明星由纯CSS突出显示。

软星选择

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

use

＆＃13;

此解决方案在没有JavaScript的情况下无法正常运行。有一个问题：很难选择100％或0％：）

css悬停改变盖上星星

1 个答案:

全明星

软星选择