单选按钮星级评分：实现从左至右悬停效果的方案咨询

问题说明 #

当前单选按钮星级评分组件的悬停高亮效果为从右至左触发（如悬停第3颗星时，右侧第4、5颗星也会高亮），需求改为从左至右高亮（悬停第3颗星时，左侧第1、2颗星及自身全部高亮）。需满足以下限制：

• 禁止使用flex-direction: row-reverse或direction: rtl（会反转星星显示顺序）
• 无法修改循环生成DOM的顺序（必须从1到5依次生成input和label）

解决方案 #

方案1：CSS :has()选择器实现（现代浏览器支持） #

利用CSS的:has()选择器实现反向兄弟元素的高亮控制，无需修改DOM结构：

.rating-container input[type="radio"] {
  display: none;
}

.rating-container label {
  display: inline-block;
  cursor: pointer;
}

.rating-container svg {
  fill: #ccc;
  transition: fill 0.2s;
}

/* 选中状态：选中N星时，1~N星全部高亮 */
.rating-container input[type="radio"]:checked ~ label svg {
  fill: #000;
}
.rating-container input[type="radio"]:checked ~ input[type="radio"] ~ label svg {
  fill: #ccc;
}

/* 悬停状态：hover第N星时，1~N星全部高亮 */
.rating-container:has(label:hover) label:has(~ label:hover) svg,
.rating-container label:hover svg {
  fill: #000;
}
.rating-container:has(label:hover) label:hover ~ label svg {
  fill: #ccc;
}

方案2：JavaScript实现（兼容旧浏览器） #

通过监听鼠标事件，动态为目标星星及左侧星星添加/移除高亮类：

第一步：添加CSS高亮类

.rating-container input[type="radio"] {
  display: none;
}

.rating-container label {
  display: inline-block;
  cursor: pointer;
}

.rating-container svg {
  fill: #ccc;
  transition: fill 0.2s;
}

/* 高亮样式 */
.rating-container label.highlight svg {
  fill: #000;
}

/* 选中状态保持 */
.rating-container input[type="radio"]:checked ~ label.highlight svg {
  fill: #000;
}

第二步：添加JavaScript逻辑

const ratingContainer = document.getElementById('rating-rate');
const labels = ratingContainer.querySelectorAll('label');

// 绑定鼠标进入事件
labels.forEach((label, index) => {
  label.addEventListener('mouseenter', () => {
    for (let i = 0; i <= index; i++) {
      labels[i].classList.add('highlight');
    }
  });

  // 绑定鼠标离开事件
  label.addEventListener('mouseleave', () => {
    labels.forEach(l => l.classList.remove('highlight'));
    // 恢复选中状态的高亮
    const checkedInput = ratingContainer.querySelector('input[type="radio"]:checked');
    if (checkedInput) {
      const checkedIndex = Array.from(ratingContainer.querySelectorAll('input')).indexOf(checkedInput);
      for (let i = 0; i <= checkedIndex; i++) {
        labels[i].classList.add('highlight');
      }
    }
  });
});

// 页面加载时初始化选中状态高亮
window.addEventListener('load', () => {
  const checkedInput = ratingContainer.querySelector('input[type="radio"]:checked');
  if (checkedInput) {
    const checkedIndex = Array.from(ratingContainer.querySelectorAll('input')).indexOf(checkedInput);
    for (let i = 0; i <= checkedIndex; i++) {
      labels[i].classList.add('highlight');
    }
  }
});

方案说明 #

• 方案1依赖CSS :has()选择器，支持Chrome 101+、Firefox 121+、Safari 15.4+等现代浏览器，代码简洁无需JS介入
• 方案2通过JavaScript控制类名，兼容所有主流浏览器，适合需要支持旧版本浏览器的场景

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