html
DESCRIPTION
HTMLHTMLHTMLTRANSCRIPT
HTML
<div class="ec-stars-wrapper">
<a href="#" data-value="1" title="Votar con 1
estrellas">★</a>
<a href="#" data-value="2" title="Votar con 2
estrellas">★</a>
<a href="#" data-value="3" title="Votar con 3
estrellas">★</a>
<a href="#" data-value="4" title="Votar con 4
estrellas">★</a>
<a href="#" data-value="5" title="Votar con 5
estrellas">★</a>
</div>
<noscript>Necesitas tener habilitado javascript para poder
votar</noscript>
.ec-stars-wrapper {
/* Espacio entre los inline-block (los hijos, los `a`)
http://ksesocss.blogspot.com/2012/03/display-inline-block-y-
sus-empeno-en.html */
font-size: 0;
/* Podríamos quitarlo,
pero de esta manera (siempre que no le demos padding),
sólo aplicará la regla .ec-stars-wrapper:hover a cuando
también se esté haciendo hover a alguna estrella */
display: inline-block;
}
.ec-stars-wrapper a {
text-decoration: none;
display: inline-block;
/* Volver a dar tamaño al texto */
font-size: 32px;
font-size: 2rem;
color: #888;
}
.ec-stars-wrapper:hover a {
color: rgb(39, 130, 228);
}
/*
* El selector de hijo, es necesario para aumentar la especifidad
*/
.ec-stars-wrapper > a:hover ~ a {
color: #888;
}
☻