現在の要素のホバー効果が機能していません

Question

私は単純なCSS評価ウィジェットを実装しています。これまでのところすべてがうまくいっていますが、私はこの単純な問題に直面しています。 現在の星の上をホバリングすると星の色は変わりませんが、現在の星をクリックすると期待どおりに動作します。

これは問題がどこにあるかと思います。

.rating label.rate:hover ~ label.rate:before { 
    color: #FD4; 
} 

div.rating { 
 
    display: inline-block; 
 
} 
 

 
.rating input.rate { 
 
    display: none; 
 
} 
 

 
.rating label.rate { 
 
    float: right; 
 
    padding: 10px; 
 
    font-size: 50px; 
 
    color: #444; 
 
} 
 

 
.rating label.rate:hover ~ label.rate:before { 
 
    color: #FD4; 
 
} 
 

 
.rating input.rate:checked ~ label.rate:before { 
 
    color: #FD4; 
 
} 
 
    
 
label.rate:before { 
 
    content: '*'; 
 
} 
 

<div class="rating">   
 
    <input class="rate" id="star-5" type="radio" name="rate" value="5"/> 
 
    <label class="rate" for="star-5"></label> 
 
    <input class="rate" id="star-4" type="radio" name="rate" value="4"/> 
 
    <label class="rate" for="star-4"></label> 
 
    <input class="rate" id="star-3" type="radio" name="rate" value="3"/> 
 
    <label class="rate" for="star-3"></label> 
 
    <input class="rate" id="star-2" type="radio" name="rate" value="2"/> 
 
    <label class="rate" for="star-2"></label> 
 
    <input class="rate" id="star-1" type="radio" name="rate" value="1"/> 
 
    <label class="rate" for="star-1"></label>   
 
</div>

Answer 1

あなたのCSSは、以前の要素にではなく、現在に適用されます。

.rating label.rate:hover ~ label.rate:before, 
.rating label.rate:hover:before { 
    color: #FD4; 
} 

完全なコード：

div.rating { 
 
    display: inline-block; 
 
} 
 

 
.rating input.rate { 
 
    display: none; 
 
} 
 

 
.rating label.rate { 
 
    float: right; 
 
    padding: 10px; 
 
    font-size: 50px; 
 
    color: #444; 
 
} 
 

 
.rating label.rate:hover~label.rate:before, 
 
.rating label.rate:hover:before { 
 
    color: #FD4; 
 
} 
 

 
.rating input.rate:checked~label.rate:before { 
 
    color: #FD4; 
 
} 
 

 
label.rate:before { 
 
    content: '*'; 
 
}

<div class="rating"> 
 
    <input class="rate" id="star-5" type="radio" name="rate" value="5" /> 
 
    <label class="rate" for="star-5"></label> 
 
    <input class="rate" id="star-4" type="radio" name="rate" value="4" /> 
 
    <label class="rate" for="star-4"></label> 
 
    <input class="rate" id="star-3" type="radio" name="rate" value="3" /> 
 
    <label class="rate" for="star-3"></label> 
 
    <input class="rate" id="star-2" type="radio" name="rate" value="2" /> 
 
    <label class="rate" for="star-2"></label> 
 
    <input class="rate" id="star-1" type="radio" name="rate" value="1" /> 
 
    <label class="rate" for="star-1"></label> 
 
</div>