Fill half voting star

HTML & CSS
1

I have a star rating, the problem is that hovering over half of a star doesn’t fill it but hovering over the other half of the same star fills the back half; and I don’t know what your problem could be, I have tried to modify the code without any result.

<!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;
}
2

Does this do what you want?

3

The amount of overlap in the child CSS makes me twitch…

.fa-star-o {
  overflow: clip;
  color: #e2943a;
  position: absolute;
  z-index: 30;
}

.fa-star-o:nth-child(odd) {
  z-index: 40;
  width: 25px;
}

.fa-star-o:nth-child(10) {
  left: 20px;
}
...
1 Like
5

Yes good call:) I’ve incorporated it here.

6

Thank you very much the code helped me, this is much better and cleaner

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.