Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这种事情可能很难，因为~只关注元素之后的兄弟姐妹，而不是之前。您可以使用hover解决此问题，但可能无法使用: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中没有先前的兄弟选择器。解决方案是颠倒字符的顺序，让它像下一个兄弟姐妹一样。

＆＃13;

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

＆＃13;

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

＆＃13;

如何将悬停效果保持为评级栏css代码？

2 个答案: