HTML/CSS五星评分系统优化：实现点击跳转与悬停连动变色

核心思路 #

通过Flex反向排列让星星从右到左布局，结合CSS兄弟选择器实现悬停时当前及左侧星星同步变色，同时保证每个评分链接的点击区域独立可交互。

完整代码实现 #

HTML结构

<div class="rating">
  <a href="/rating/5" class="star">★</a>
  <a href="/rating/4" class="star">★</a>
  <a href="/rating/3" class="star">★</a>
  <a href="/rating/2" class="star">★</a>
  <a href="/rating/1" class="star">★</a>
</div>

CSS样式

.rating {
  display: flex;
  flex-direction: row-reverse; /* 反向排列，让选择器能选中左侧星星 */
  font-size: 2em;
  color: #ddd; /* 默认灰色 */
}

.star {
  text-decoration: none;
  color: inherit;
  width: 1em;
  text-align: center;
  position: relative;
}

/* 悬停当前星星时，自身及右侧（实际是页面左侧）的星星变色 */
.star:hover,
.star:hover ~ .star {
  color: #ffc107; /* 高亮黄色 */
}

/* 可选：如果需要记住已评分状态，可给已评分的星星加.active类 */
.star.active,
.star.active ~ .star {
  color: #ffc107;
}

关键问题解决 #

1. 悬停同步变色：
   利用flex-direction: row-reverse把星星顺序反转，此时~兄弟选择器可以选中当前hover星星之后的元素（对应页面上左侧的星星），配合star:hover ~ star就能实现“悬停某颗星星，左侧所有星星同步变色”的效果。

2. 点击区域正常交互：
   给每个.star设置固定宽度1em，并通过Flex布局保证每个链接的点击区域独立，不需要用负margin来重叠，避免了点击区域被覆盖的问题。

3. 替代方案（不使用Flex反向）：
   如果不想用反向排列，可以用:has()选择器（需浏览器支持）：

   .rating:has(.star:nth-child(3):hover) .star:nth-child(-n+3) {
     color: #ffc107;
   }
   

   但兼容性不如Flex反向方案，推荐优先使用前者。

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