css - 从子窗口刷新父？

Question

我正在尝试创建一个星级评分系统，我现在只需要关注它的 css 部分。

当用户将鼠标悬停在上面时，它会填充星星，但它是从右到左进行的，我想让它从左到右工作。

谁能告诉我我需要改变什么才能做到这一点。谢谢。

<span class="rating">
    <input type="radio" class="rating-input"
        id="rating-input-1-5" name="rating-input-1">
    <label for="rating-input-1-5" class="rating-star"></label>
    <input type="radio" class="rating-input"
        id="rating-input-1-4" name="rating-input-1">
    <label for="rating-input-1-4" class="rating-star"></label>
    <input type="radio" class="rating-input"
        id="rating-input-1-3" name="rating-input-1">
    <label for="rating-input-1-3" class="rating-star"></label>
    <input type="radio" class="rating-input"
        id="rating-input-1-2" name="rating-input-1">
    <label for="rating-input-1-2" class="rating-star"></label>
    <input type="radio" class="rating-input"
        id="rating-input-1-1" name="rating-input-1">
    <label for="rating-input-1-1" class="rating-star"></label>
</span>

CSS:

<

    style>
    .rating {
        overflow: hidden;
        display: inline-block;
    }
    .rating-input {
        position: absolute;
        left: 0;
        top: -50px;
    }
    .rating-star {
        display:inline-block;
        width: 30px;
        height: 30px;
        background: url('assets/img/icons/stars.png') 0 0px;
        background-repeat:no-repeat;
        background-size: 22px 20px;
    }
    .rating-star:hover {
        background-position: 0 16;
        background: url('assets/img/icons/favorites.png') 0 0px;
        background-size: 22px 20px;
    }
    .rating-star:hover,
    .rating-star:hover ~ .rating-star,
    .rating-input:checked ~ .rating-star {
        background-position: 0 0;
        background: url('assets/img/icons/favorites.png') 0 0px;
        background-size: 22px 20px;
        background-repeat:no-repeat;
    }

    </style>

Answer 1

只需反转星号顺序(也在您的标记中):

.rating-star {
  float:right;
  margin-right: 5px; 
}