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

从子窗口刷新父级？

1 个答案: