Este es mi código en el que quiero hacer una calificación de estrellas simple usando JavaScript HTML y CSS.
var numbersDiv = document.getElementById("23"); var aa = document.createElement("div"); aa.className = "rating"; for (let i = 0; i < 5; i++) { var tempStar = document.createElement("input"); tempStar.setAttribute("type", "radio"); tempStar.setAttribute("name", "star"); var tempStarId = "star" + i; tempStar.id = tempStarId; var tempLabel = document.createElement("label"); tempLabel.setAttribute("for", tempStarId); aa.appendChild(tempStar); aa.appendChild(tempLabel); } numbersDiv.appendChild(aa); .rating { display: flex; } .rating input { display: none; } .rating label { display: block; cursor: pointer; width: 50px; background: #ccc; } .rating label:before { content: "★"; position: relative; font-family: fontAwesome; display: block; font-size: 50px; color: #101010; } .rating label:after { content: "★"; position: absolute; font-family: fontAwesome; display: block; font-size: 50px; color: #1f9cff; top: 0; } .rating label:hover:after, .rating label:hover~label:after, .rating input:checked~label:after { opacity: 1; } <html> <head> <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css" rel="stylesheet" /> </head> <body> <div id="23"></div> </body> </html>Hay varios problemas:
after están ligeramente por encima de las estrellas anteriores.Vi este código de Internet, pero por alguna razón simplemente no funciona. ¿Alguien sabe cómo solucionar este problema?
(Solo para que conste, el video que vi en línea es este: https://www.youtube.com/watch?v=Ep78KjstQuw )
Te faltaban 2 opciones CSS importantes:
Su etiqueta debe tener una position: relative; ya que las estrellas se colocarán dentro de la etiqueta en relación con las coordenadas de la etiqueta. La position: relative; hizo que las estrellas se alinearan con el elemento del cuerpo y, por lo tanto, en la parte superior de la página.
Ustedes estrellas nunca tuvieron la opacity: 0; conjunto, por lo tanto siempre son visibles.
var numbersDiv = document.getElementById("23"); var aa = document.createElement("div"); aa.className = "rating"; for (let i = 0; i < 5; i++) { var tempStar = document.createElement("input"); tempStar.setAttribute("type", "radio"); tempStar.setAttribute("name", "star"); var tempStarId = "star" + i; tempStar.id = tempStarId; var tempLabel = document.createElement("label"); tempLabel.setAttribute("for", tempStarId); aa.appendChild(tempStar); aa.appendChild(tempLabel); } numbersDiv.appendChild(aa); .rating { display: flex; } .rating input { display: none; } .rating label { /* Added Position Relative*/ position: relative; display: block; cursor: pointer; width: 50px; background: #ccc; } .rating label::before { content: "★"; position: relative; font-family: fontAwesome; display: block; font-size: 50px; color: #101010; } .rating label::after { content: "★"; position: absolute; font-family: fontAwesome; /* Set default Opacity to 0*/ opacity: 0; display: block; font-size: 50px; color: #1f9cff; top: 0; } .rating label:hover::after, .rating label:hover~label::after, .rating input:checked~label::after { opacity: 1; } <html> <head> <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css" rel="stylesheet" /> </head> <body> <div id="23"></div> </body> </html>