在沒有JavaScript的情況下點擊提交的星級評分系統？

Question

我正在實施一個星級評分系統，但它正在測試我對CSS選擇器知道的限制。

目前我擁有它，所以每個星星都是一個提交按鈕，當您將鼠標懸停在上面時，它會突出顯示。目前的問題是，我不知道如何改變視覺上一星（所以，當你將鼠標懸停在第三個，這也凸顯了前兩個

這是當前實現的：

HTML：

<div class="ratings> 
    <form action="/blog/rate" class="ratings-form" method="post"> 
    <input id="rating_rating" name="rating[rating]" type="hidden" value="1"> 
    <input id="rating_post_id" name="rating[post_id]" type="hidden" value="3"> 
    <div id="rating-1" class="rating-star true"><input type="submit" value="★"></div> 
    </form> 
    <form action="/blog/rate" class="ratings-form" method="post"> 
    <input id="rating_rating" name="rating[rating]" type="hidden" value="2"> 
    ... (continued through 5) ... 
</div> 

CSS：

.rating-star > input[type="submit"] { 
    padding: 0px 2px; 
    float: left; 
    color: #ccc; 
    background: transparent; 
    border:0 none; 
    border-radius: 50px; 
} 

.rating-star > input[type="submit"]:hover { 
    color: #faa; 
} 

因爲我要修改的元素是一對夫婦深形式的水平，看來我不能用~兄弟選擇器。我是否錯過了某些東西，或者是否需要JavaScript來使這種效果成爲可能？

Answer 1

是的，這是可能的，但並不像你試圖這樣做。缺失的主要原因是您可以在type = submit的元素上使用name屬性。爲了達到預期的效果，我們還需要在HTML中以相反順序排列星號，以便兄弟操作符正確運行。

form { 
 
    width: 100px; 
 
} 
 

 
button { 
 
    border: 0; 
 
    background: transparent; 
 
    font-size: 1.5em; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: right; 
 
} 
 

 
button:hover, 
 
button:hover + button, 
 
button:hover + button + button, 
 
button:hover + button + button + button, 
 
button:hover + button + button + button + button { 
 
    color: #faa; 
 
}

<form action="" method="POST"> 
 
    <input type="hidden" name="rating[post_id]" value="3"> 
 
    <button type="submit" name="rating[rating]" value="5">&#9733;</button> 
 
    <button type="submit" name="rating[rating]" value="4">&#9733;</button> 
 
    <button type="submit" name="rating[rating]" value="3">&#9733;</button> 
 
    <button type="submit" name="rating[rating]" value="2">&#9733;</button> 
 
    <button type="submit" name="rating[rating]" value="1">&#9733;</button> 
 

 
</form>