评分脚本Hover选中SVG方向错误求助：需改为从左到右

问题核心 #

你当前的hover逻辑应该是把当前表情及右侧设为绿色了，改成当前表情及左侧就能解决方向问题，同时还要处理点击后的永久选中状态。

修复代码示例 #

HTML结构（假设你的表情是SVG元素）

<div class="rating-group">
  <svg class="rating-emoji" data-index="0" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
  </svg>
  <svg class="rating-emoji" data-index="1" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 10l-4.24 2.36 1.54-4.95-3.7-3.07 4.92-.42L10 5l1.76 4.45 4.92.42-3.7 3.07 1.54 4.95L10 12z"/>
  </svg>
  <svg class="rating-emoji" data-index="2" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
  </svg>
  <svg class="rating-emoji" data-index="3" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 10l-4.24 2.36 1.54-4.95-3.7-3.07 4.92-.42L10 5l1.76 4.45 4.92.42-3.7 3.07 1.54 4.95L10 12z"/>
  </svg>
  <svg class="rating-emoji" data-index="4" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
  </svg>
</div>

CSS样式

.rating-emoji {
  width: 40px;
  height: 40px;
  fill: #333;
  cursor: pointer;
  transition: fill 0.2s;
}
/* 选中状态（点击后永久保留） */
.rating-emoji.selected {
  fill: #2ecc71;
}
/* hover临时状态 */
.rating-emoji.hovered {
  fill: #2ecc71;
}

JavaScript逻辑

const emojis = document.querySelectorAll('.rating-emoji');
let activeIndex = -1; // 记录最后一次点击的表情索引

// 处理hover时的临时选中
function setHoverState(currentIndex) {
  emojis.forEach((emoji, idx) => {
    // 只要索引小于等于当前hover的表情，或者已经被永久选中，就高亮
    if (idx <= currentIndex || (activeIndex !== -1 && idx <= activeIndex)) {
      emoji.classList.add('hovered');
    } else {
      emoji.classList.remove('hovered');
    }
  });
}

// 鼠标离开后，恢复到点击后的永久状态
function resetToActiveState() {
  emojis.forEach((emoji, idx) => {
    emoji.classList.remove('hovered');
    if (idx <= activeIndex) {
      emoji.classList.add('selected');
    } else {
      emoji.classList.remove('selected');
    }
  });
}

// 点击时记录选中索引，并设置永久状态
function setActiveState(currentIndex) {
  activeIndex = currentIndex;
  emojis.forEach((emoji, idx) => {
    if (idx <= currentIndex) {
      emoji.classList.add('selected');
    } else {
      emoji.classList.remove('selected');
    }
  });
}

// 给每个表情绑定事件
emojis.forEach((emoji, idx) => {
  emoji.addEventListener('mouseenter', () => setHoverState(idx));
  emoji.addEventListener('mouseleave', resetToActiveState);
  emoji.addEventListener('click', () => setActiveState(idx));
});

关键修复点 #

1. hover方向修正：把原逻辑中idx >= currentIndex的判断改成idx <= currentIndex，确保当前表情及左侧都被高亮。
2. 状态分层：用selected类存点击后的永久状态，hovered类存临时hover状态，避免两者冲突。
3. 离开恢复：鼠标离开时移除所有hover类，恢复到点击后的永久选中状态。

内容的提问来源于stack exchange，提问作者Jiří Nováček