Wouter Wouter - 1 month ago 7
CSS Question

css on hover change lid up stars

Hey all i have this piece of css which allows me to show stars from 0 till 5. I can set the class to determine how many stars need to be lid up. How can i change the value on hover. I have tryed adding the :hover value but this gives me unexpected results.

I just added the hover class as the after class as the after effect is what i am trying to accomplish but then dynamicly. When doing this the stars are hovered at the top of the page making the original gray stars invisible and it doesnt reflect the amount of stars i hovered. i am not that skilled in css so any help would be appriciated

<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

As I understood what you want:

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

I use JavaScript here to detect a count of selected stars. Stars are highlighted by pure CSS.

Comments