从子窗口刷新父项？

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