如何保持悬停效果像评级栏CSS代码？

Question

单击代码，然后查看它。 我可以执行我想要的所有悬停效果，除了用户单击单选按钮后无法保持绿色突出显示的效果。 与大多数星级代码一样，如果用户选择第三个单选按钮，则前三个项目应为绿色。 我知道我应该使用> ~ ， :checked和:not(:checked) ，我已经尝试了很多但是失败了，感谢您的帮助！

 #rating_bar{ width:100px; height:30px; margin: 4px 175px !important; display:inline-block; display:inline; } #rating_bar > label:before{ content:'0'; color: #c7c5c5; cursor:pointer; font-size:3em; } #rating_bar:hover > label:before { color: #4bce32; } #rating_bar > label:hover ~ label:before { color: #c7c5c5; } #rating_bar >input :checked ~ label:before { color: #c7c5c5; } 

 <div id="rating_bar"> <input type="radio" id="rate_1" name="rating_f" value="1" /><label for="rate_1" title="Super effecitive!"></label> <input type="radio" id="rate_2" name="rating_f" value="1" /><label for="rate_2" title="Pretty effective!"></label> <input type="radio" id="rate_3" name="rating_f" value="3" /><label for="rate_3" title="Effective!"></label> <input type="radio" id="rate_4" name="rating_f" value="4" /><label for="rate_4" title="Kinda effective!"></label> <input type="radio" id="rate_5" name="rating_f" value="5" /><label for="rate_5" title="Not effective!"></label> </div> 

Answer 1

这种事情可能很困难，因为~只在元素之后而不是之前查看兄弟姐妹。 您可以使用hover来解决这个问题，但是:checked可能:checked 。

但是，在这种情况下，有一种解决方法。 您可以使用float: right直观地反转元素的顺序，同时在DOM中保持它们的顺序。 因此，您只需反转标记中元素的顺序即可。 然后，使用~将影响视觉上位于前面的元素，因为它们实际上位于dom的后面。

 #rating_bar { width:130px; height:30px; margin: 4px 175px !important; display:inline-block; } #rating_bar > label { float: right; } #rating_bar > input { display: none; } #rating_bar > label:before { content:'0'; color: #c7c5c5; cursor:pointer; font-size:3em; } #rating_bar > label:hover:before { color: #4bce32; } #rating_bar > label:hover ~ label:before { color: #4bce32; } #rating_bar > input:checked ~ label:before { color: #4bce32; } 

 <div id="rating_bar"> <input type="radio" id="rate_5" name="rating_f" value="5" /> <label for="rate_5" title="Not effective!"></label> <input type="radio" id="rate_4" name="rating_f" value="4" /> <label for="rate_4" title="Kinda effective!"></label> <input type="radio" id="rate_3" name="rating_f" value="3" /> <label for="rate_3" title="Effective!"></label> <input type="radio" id="rate_2" name="rating_f" value="1" /> <label for="rate_2" title="Pretty effective!"></label> <input type="radio" id="rate_1" name="rating_f" value="1" /> <label for="rate_1" title="Super effecitive!"></label> </div> 

使用flex在视觉上重新排列元素的相似方法也是可能的。

http://jsfiddle.net/5h9n72dt/1/

Answer 2

因为CSS中没有以前的兄弟姐妹选择器。 解决方案是反转字符的顺序，使其像下一个兄弟姐妹一样工作。

 #rating_bar { display:inline; unicode-bidi: bidi-override; direction: rtl; } #rating_bar > input { display: none; } #rating_bar > label[title] { direction: ltr; } #rating_bar > label:before { content:'★'; color: #c7c5c5; cursor: pointer; } #rating_bar > label:hover:before, #rating_bar > label:hover ~ label:before, #rating_bar > input:checked ~ label:before { color: green; } 

 <div id="rating_bar"> <input type="radio" id="rate_5" name="rating_f" value="5" /> <label for="rate_5" title="Not effective!"></label> <input type="radio" id="rate_4" name="rating_f" value="4" /> <label for="rate_4" title="Kinda effective!"></label> <input type="radio" id="rate_3" name="rating_f" value="3" /> <label for="rate_3" title="Effective!"></label> <input type="radio" id="rate_2" name="rating_f" value="2" /> <label for="rate_2" title="Pretty effective!"></label> <input type="radio" id="rate_1" name="rating_f" value="1" /> <label for="rate_1" title="Super effecitive!"></label> </div>