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

星の順序を逆にするだけです (マークアップでも):

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