2

Estoy intentando hacer puntuaciones con estrellas y que al pasar por encima de cada una, se aplique una clase css. El caso es que se me aplica a todas las estrellas a la vez y mi intención es que solo se aplique cuando pases el ratón por encima de principio a fin y que se queden fijadas conforme sube la puntuación y solo mientras tengas el ratón encima.

Aquí va lo que tengo hecho.

var estrella = document.getElementsByClassName("star");

function inclinar() {
    for(var i = 0; i < estrella.length; i++) {
        estrella[i].className += " inclinada";
    }
}

function desinclinar() {
    for(var i = 0; i < estrella.length; i++) {
        estrella[i].classList.remove("inclinada");
    }
}

for(var i = 0; i < estrella.length; i++) {
    estrella[i].addEventListener('mouseenter', inclinar);
    estrella[i].addEventListener('mouseleave', desinclinar);
}
.stars ul {
  list-style-type:none;
  padding:0;
}

.stars ul > li.star {
  display:inline-block;
  font-size:2.5em;
  color:#ccc;
}

.stars ul > li.star.inclinada  {
  color:#FFCC31;
  transform: rotate(20deg);
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/>
<div class="stars text-center">
    <ul id="stars">
      <li class="star" data-value="1">
        <i class="fas fa-star"></i>
      </li>
      <li class="star" data-value="2">
        <i class="fas fa-star"></i>
      </li>
      <li class="star" data-value="3">
        <i class="fas fa-star"></i>
      </li>
      <li class="star" data-value="4">
        <i class="fas fa-star"></i>
      </li>
      <li class="star" data-value="5">
        <i class="fas fa-star"></i>
      </li>
    </ul>
  </div>

Gracias!

1
  • Ya hay algunas preguntas muy parecidas a ésta en el sitio: [Valoracion estrellas [1-5] Diseño estrellas PHP HTML Formular](es.stackoverflow.com/q/126046/250) (y al menos otra más que no logro encontrar).
    – Alvaro Montoro
    Commented el 26 feb. 2018 a las 14:37

3 respuestas 3

1

Pues para no cambiar mucho tu codigo, puedes obtener el valor del data-value y asignar el recorrido del ciclo hasta ese valor. Asi pintara las estrellas por las que pases el mouse

var estrella = document.getElementsByClassName("star");

function inclinar() {
  for (var i = 0; i < this.getAttribute("data-value"); i++) {
    estrella[i].className += " inclinada";
  }
}

function desinclinar() {
  for (var i = 0; i < this.getAttribute("data-value"); i++) {
    estrella[i].classList.remove("inclinada");
  }
}

for (var i = 0; i < estrella.length; i++) {
  estrella[i].addEventListener('mouseenter', inclinar);
  estrella[i].addEventListener('mouseleave', desinclinar);
}
.stars ul {
  list-style-type: none;
  padding: 0;
}

.stars ul>li.star {
  display: inline-block;
  font-size: 2.5em;
  color: #ccc;
}

.stars ul>li.star.inclinada {
  color: #FFCC31;
  transform: rotate(20deg);
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<div class="stars text-center">
  <ul id="stars">
    <li class="star" data-value="1">
      <i class="fas fa-star"></i>
    </li>
    <li class="star" data-value="2">
      <i class="fas fa-star"></i>
    </li>
    <li class="star" data-value="3">
      <i class="fas fa-star"></i>
    </li>
    <li class="star" data-value="4">
      <i class="fas fa-star"></i>
    </li>
    <li class="star" data-value="5">
      <i class="fas fa-star"></i>
    </li>
  </ul>
</div>

0

el problema es que estas recorriendo todas las estrellas y le estas aplicando la clase inclinada o lo mismo cuando quita el mouse.

podes acceder al target, en este caso los li, donde aplicas los eventos de la siguiente manera

var estrella = document.getElementsByClassName("star");

function inclinar(event) {

  var dataValue = event.target.getAttribute('data-value');

  for(var i = 0; i < estrella.length; i++) {
    if(estrella[i].getAttribute('data-value') <= dataValue)
      estrella[i].className += " inclinada";
  }
}

function desinclinar(event) {
  var dataValue = event.target.getAttribute('data-value');

  for(var i = 0; i < estrella.length; i++) {
    if(estrella[i].getAttribute('data-value') > dataValue)
      estrella[i].className = "star";
  }
}

for(var i = 0; i < estrella.length; i++) {
    estrella[i].addEventListener('mouseenter', inclinar);
    estrella[i].addEventListener('mouseleave', desinclinar);
}

el jsfiddle

2
  • Gracias, lo que tu dices funciona. Aunque siento haberme explicado mal, lo que busco es como hacer que las estrellas por las que pasas el ratón se queden "fijadas" con esa clase mientras tengas el ratón encima del div que contiene las estrellas.
    – Britba
    Commented el 26 feb. 2018 a las 14:07
  • ahí actualice el código, el camino es ese. Commented el 26 feb. 2018 a las 14:36
0

Para hacer lo que quieres no hace falta JavaScript (al menos no para esta parte), se puede hacer sólo con HTML y CSS. La idea sería usar la pseudo-clase :hover para cuando el ratón se mueva por encima y el selector de hermano adyacente ~ para seleccionar los siguientes.

Serían unos cambios simples en tu CSS y quedaría así:

Fíjate que he cambiado el orden de las estrellas que ahora van del 5 al 1 en lugar del 1 al 5.

.stars ul {
  list-style-type: none;
  padding: 0;
  display: inline-block;
  height: auto;
}

.stars ul>li.star {
  display: inline-block;
  font-size: 2.5em;
  color: #ccc;
  float: right;
  transition: all 0.25s;
}

.stars ul>li.star:hover,
.stars ul>li.star:hover~li.star {
  color: #FFCC31;
  transform: rotate(20deg);
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<div class="stars text-center">
  <ul id="stars">
    <li class="star" data-value="5">
      <i class="fas fa-star"></i>
    </li>
    <li class="star" data-value="4">
      <i class="fas fa-star"></i>
    </li>
    <li class="star" data-value="3">
      <i class="fas fa-star"></i>
    </li>
    <li class="star" data-value="2">
      <i class="fas fa-star"></i>
    </li>
    <li class="star" data-value="1">
      <i class="fas fa-star"></i>
    </li>
  </ul>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.