1

我正在尝试创建一个星级评分系统，我现在只需要专注于它的 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>
4

1 回答 1

2

Simply inverse the star order (in your mark-up too):

.rating-star {
  float:right;
  margin-right: 5px; 
}
于 2013-02-10T23:24:47.117 回答