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>