Etat d'étoiles méthode 1

by ydelmas

HTML

<div class="etoiles etat-3">
    <label>★</label><!--
    --><label>★</label><!--
    --><label>★</label><!--
    --><label>★</label><!--
    --><label>★</label>
</div>

CSS

.etoiles { color: grey; }
/* état fixe */
.etat-1 :first-child,
  .etat-2 :nth-child(-n+2),
  .etat-3 :nth-child(-n+3),
  .etat-4 :nth-child(-n+4),
  .etat-5 > * { color: #996600; }
/* survol */
.etoiles:hover label { color: #000099; }
.etoiles label:hover { color: #0000FF; }
.etoiles :hover ~ label { color: #000000; }