纯CSS实现星级评分悬停时高亮当前元素前所有同级兄弟元素

核心思路 #

CSS原生仅支持后继兄弟元素选择器，无法直接选中当前元素的前置同级元素。我们可以通过反转星标渲染顺序的方式，把选中左侧星标的需求转换为选中后继兄弟元素的需求，全程不需要引入JavaScript。

实现步骤 #

• 调整星标的DOM排列顺序，将原来视觉上从左到右的1星_{5星顺序，改为DOM中从先到后的5星}1星顺序
• 给父容器设置从右到左的排版规则，让星标在视觉上仍然呈现1星~5星的正序排列
• 调整hover选择器规则，悬停当前星标时同时选中所有后继兄弟元素（对应视觉上的左侧所有星标）

完整可运行代码 #

HTML代码 #

<div class="rating-container">
    <!-- DOM顺序为5星到1星，视觉上会自动反转为正序 -->
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
</div>

CSS代码 #

/* 父容器设置从右到左排版，实现视觉正序 */
.rating-container {
    direction: rtl;
    display: inline-block;
}
.miniRankButton {
    display: inline-block;
    background: #FFF;
    border: none;
    font-size: 22pt;
    color: #BDBDBD;
    cursor: pointer;
    outline: none;
}
/* 悬停当前星标+所有左侧星标高亮 */
.miniRankButton:hover,
.miniRankButton:hover ~ .miniRankButton {
    color: #FFE136;
}

效果说明 #

• 悬停视觉上第4个星标时，对应DOM中第2个星标，~选择器会选中DOM中排在它后面的3个星标，对应视觉上的前3个星标同步高亮
• 悬停其他位置星标同理，完全符合交互要求，兼容所有主流浏览器

内容的提问来源于stack exchange，提问作者X3R0