Star-Rating sólo con CSS

17/Jun/2015 192

Cualquier sistema de votación (star-rating system) requiere de los 3 componentes básicos de todo sitio web: HTML, CSS y JavaScript. Pero a medida que la tecnología avanza, es posible dejar la ayuda que JavaScript brindó por mucho tiempo mientras CSS no entraba de lleno a la capa de interacción, principalmente a través de CSS3. Pero existen propiedades CSS2 que siempre han permitido cierto grado de complejidad pero que por culpa de IE6 y su hermano mutante y deforme IE7 no eran posible utilizarlos. Con soporte IE8+ ya podemos utilizar tranquilamente -por ejemplo- selectores avanzados de atributos y descendientes, los que precisamente son los protagonistas de este artículo.

star-rating

Me propuse a hacer un star-rating con HTML y CSS, dejando a JavaScript la tarea de conectar el dato con el servidor, si fuese el caso. Terminé con 2 opciones diferentes, y al ponerme a investigar descubrí que ya existía por lo menos una de las soluciones a las que llegué. Para no perder el trabajo, de todas maneras las expongo aquí por si a alguien más les son útiles.

Para ambos ejemplos el marcado HTML es el mismo:

<div class="star-rating">
    <a href="#">&#9733;</a>
    <a href="#">&#9733;</a>
    <a href="#">&#9733;</a>
    <a href="#">&#9733;</a>
    <a href="#">&#9733;</a>
</div>

Técnica 1

Consiste en al hacer :hover a todo el contenedor .star-rating y al elemento (estrella), se cambia el color de todos al color de estrella seleccionado (amarillo), salvo a los selectores hermanos del elemento que vuelven a tener el color normal:

.star-rating a {
  display: inline-block;
  color: #95a5a6; /* gris (normal) */
}
.star-rating:hover a {
  color: #f39c12; /* amarillo (seleccionado) */
}
  .star-rating:hover a:hover ~ a {
    color: #95a5a6; /* gris (normal) */
  }

JS Bin on jsbin.com

Técnica 2

Como en CSS los hermanos adyacentes sólo alcanzan los que están hacia adelante en el árbol que el propio, no podemos dar estilos a los anteriores al :hover, el cual es el propósito de todo star-rating. Entonces, por qué no darlos vuelta? Flotamos los elementos (estrellas) hacia la derecha (float: right;) logrando invertirlos y obtenemos el resultado que necesitamos:

.star-rating a {
  float: right;
  color: #95a5a6; /* gris (normal) */
}
  .star-rating a:hover {
    color: #f39c12; /* amarillo (seleccionado) */
  }
  .star-rating a:hover ~ a {
    color: #f39c12; /* amarillo (seleccionado) */
  }

JS Bin

Comentarios

  1. tadalafil generic [#]

    tadalafil 60 mg for sale https://superactivetadalafil.com/ tadalafil 60 mg for sale tadalis sx

  2. Numbersfrego [#]

    300 mg benadryl benadryl gel tablets – canada benadryl

  3. what is tadalafil [#]

    tadalafil daily use https://nextadalafil.com/ tadalafil 40 tadalafil dosage

  4. tadalafil troche [#]

    tadalafil goodrx tadalafil cvs side effects of tadalafil

  5. Shnrhz [#]

    canadian online pharmacy viagra – online pharmacy usa canadian pharmacy world coupon code

  6. Numbersfrego [#]

    buy zyrtec in singapore generic claritin – zyrtec presc

  7. Udxjxg [#]

    cialis com – tadalafil 50mg cialis for sale canadian pharmacy

  8. Numbersfrego [#]

    new ed treatments ed meds online without doctor prescription – pills for erection

  9. Ltxkgf [#]

    tadalafil 10mg prices in india – overseas pharmacy no prescription can you purchase cialis over the counter

  10. Numbersfrego [#]

    can you buy amoxicillin over the counter canada keflex antibiotic – cephalexin 500mg capsule antibiotic

  11. cialis 20mg [#]

    how long does tadalafil last cialis tablets tadalafil powder suppliers

  12. Xppskb [#]

    sildenafil tablets 5mg – generic drug for viagra female viagra over the counter

  13. Ymbwtv [#]

    online purchase viagra – viagra 150mg eu pharmacy viagra

  14. KevinSaima [#]

    over the counter ed erectile dysfunction pills cheapest ed pills

  15. Dzpent [#]

    vardenafil 20mg tablets – buy vardenafil no prescription vardenafil online prescription

  16. Awobjo [#]

    buy brand vardenafil – erectylelvt generic vardenafil online pharmacy

  17. RichardDok [#]

    where can i buy viagra over the counter: cost of viagra viagra price

  18. Nyvjmj [#]

    viagra vs cialis vardenafil – buy real vardenafil order vardenafil online cheap

  19. RichardDok [#]

    over the counter viagra: viagra discount how much is viagra

  20. Uhkpgn [#]

    vardenafil 20 mg – order vardenafil 20mg indian generic vardenafil

  21. Fjsulc [#]

    ivermectin 400 mg – stromectol 0.1 ivermectin 1mg

  22. Wioxqd [#]

    cost of ivermectin – how to buy stromectol buy ivermectin nz

  23. ClaytonAwant [#]

    how to order doxycycline buy doxycycline online – doxycycline hydrochloride 100mg

  24. Ecshmh [#]

    buy viagra brand online – how to get viagra cheap real viagra canada

  25. Gcsvmw [#]

    viagra otc usa – order real viagra female viagra pharmacy australia

  26. ClaytonAwant [#]

    amoxicillin 1000 mg capsule amoxicillin generic – amoxicillin online no prescription

  27. Jzfkqw [#]

    cialis pills online india – cialis daily use buy online eli lilly cialis

  28. ClaytonAwant [#]

    amoxicillin online without prescription amoxicillin generic – amoxicillin for sale online

  29. Zdjfpa [#]

    canadian cialis pharmacy – cialis pills uk how to order cialis from india

  30. pharmacepticacom [#]

    erectile issues in men over 50 https://pharmaceptica.com/

  31. Dick [#]

    I truly love your website.. Pleasant colors & theme. Did you make this web site yourself?

    Please reply back as I’m attempting to create my very own website and would
    love to learn where you got this from or just what the theme is named.
    Appreciate it!

  32. Maryjo [#]

    The next time I read a blog, I hope that it won’t disappoint me as much as this one.
    I mean, I know it was my choice to read through, but I actually believed you’d have something useful
    to say. All I hear is a bunch of crying about
    something you can fix if you weren’t too busy seeking attention.

    My homepage – Maryjo

  33. ClaytonAwant [#]

    vibramycin 100 mg generic doxycycline – buy cheap doxycycline

  34. บาคาร่า99 [#]

    Hi, Neat post. There’s a problem along with your site in internet explorer, would
    test this? IE nonetheless is the market leader and a large part of other people will pass over your fantastic writing because of
    this problem.

  35. Jhwvwm [#]

    buy prednisone with paypal canada – prednisone 20 mg tablet prednisone tabs 20 mg

  36. ClaytonAwant [#]

    order amoxicillin online no prescription buy amoxicillin – amoxil pharmacy

  37. CharlesGocky [#]

    viagra over the counter walmart – viagra buying viagra online

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab