Noticias:

¿Quieres formar parte de Bomber Code? Entonces entra a este tema: Postulaciones al Staff

Menú principal

Rellenar media estrella de votacion

Publicado por zapataberriod, 14 Enero de 2023, 20:32

Tema anterior - Siguiente tema

0 Usuarios y 1 Visitante están viendo este tema.

zapataberriod

Tengo una calificación de estrellas, el problema es que al pasar el mouse sobre la mitad de una estrella, no se rellena peero al pasarla sobre la mitad otra de la misma estrella, se rellena la mitad posterior; y no se cual puede ser su problema, he tratado de modificar el codigo sin ningun resultado.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Factura electronica</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="CSS3/estilo-24-1.css" />
    <!--iconos-->
    <script src="https://kit.fontawesome.com/2de33adb02.js" crossorigin="anonymous"></script>
    </head>
    <body>
                        <div class="fichas--star">
                            <div class="calificacion__star">
                                <div class="icon--star">
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                    <i class="fa-regular fa-star fa-star-o"></i>
                                </div>
                            </div>
                        </div>
    </body>
</html>

.icon--star{
    position: relative;
    width: 100%;
}

.fichas--star .calificacion__star .icon--star{
    display: block;
    direction: rtl;
    width: 100%;
    margin-top: 0;
}

.fichas--star .calificacion__star .icon--star i{
    color: #f5f509;
    font-size: 39.5px;
    padding-right: .1875em;
}

.fichas--star .calificacion__star .icon--star i:hover{
    cursor: pointer;
    color: #f5f509;
}

.fichas--star .calificacion__star .icon--star i .fa-star, 
.fichas--star .calificacion__star .icon--star:hover i{
    color:  #c0c0c0;
}

.fichas--star .calificacion__star .icon--star i:hover::before{
    font-family: "Font Awesome 5 Free";
  font-weight: 900;
    content: "\f005";
}

.fichas--star .calificacion__star .icon--star i .fa-star-o:hover::before,
.fichas--star .calificacion__star .icon--star i:hover ~ i::before{
    font-family: "Font Awesome 5 Free";
  font-weight: 900;
    content: "\f005";
    color: #f5f509;
}

.fa-star-o{
    overflow:clip;
}

.fa-star-o:nth-child(10){
    color: #e2943a;
    position: absolute;
    left: 20px;
    z-index: 30;
}

.fa-star-o:nth-child(9){
    color: #e2943a;
    position: absolute;
    left: 45px;
    z-index: 40;
    width: 25px;
}

.fa-star-o:nth-child(8){
    color: #e2943a;
    position: absolute;
    left:70px;
    z-index: 30;
}

.fa-star-o:nth-child(7){
    color: #e2943a;
    position: absolute;
    left: 95px;
    z-index: 40;
    width: 25px;
}

.fa-star-o:nth-child(6){
    color:#e2943a;
    position: absolute;
    left: 115px;
    z-index: 30;
}

.fa-star-o:nth-child(5){
    color:#e2943a;
    position: absolute;
    left: 140px;
    z-index: 40;
    width: 25px;
}

.fa-star-o:nth-child(4){
    color:#e2943a;
    position: absolute;
    left: 165px;
    z-index: 30;
}

.fa-star-o:nth-child(3){
    color:#e2943a;
    position: absolute;
    left: 190px;
    z-index: 40;
    width: 25px;
}

.fa-star-o:nth-child(2){
    color:#e2943a;
    position: absolute;
    left: 215px;
    z-index: 30;
}

.fa-star-o:nth-child(1){
    color:#e2943a;
    position: absolute;
    left: 240px;
    z-index: 40;
    width: 25px;
}

Rock Lee

¿Es algo armaste vos? o ¿Tomaste la estructura de algun lado? aunque como me lo dices va mas en el js pero no tengo mi PC cerca para probar, ¿tenes alguna url para ver dicho problema?


Saludos Familia!