星级评分CSS hover效果异常：点击/hover时高亮方向颠倒求助

问题原因 #

你的代码中，点击状态的CSS错误使用了后续兄弟选择器~，导致点击星星时右侧兄弟被高亮；而hover状态的CSS同样用~选择后续兄弟，所以hover时右侧星星变实心，和预期的左侧高亮相反。

另外，你的JavaScript点击逻辑是正确的——已经给当前星星和所有左侧星星添加了active类，但CSS多此一举地选中了后续兄弟，导致错误效果。

修复步骤 #

1. 修复点击状态（立即生效） #

修改CSS中active状态的样式，移除多余的后续兄弟选择器：

/* 替换原来的active状态CSS */
.comment-respond .comment-form-rating .stars a.active:before {
    color: #FFD700; /* 金色 */
    font-weight: 900; /* 实心样式 */
}

解释：你的JS已经给需要高亮的星星（当前+左侧）都添加了active类，所以只需要给带有active类的星星设置样式即可，不需要额外选中后续兄弟。

2. 修复hover状态（二选一） #

方案A：CSS反向排列法（无需修改JS）

这种方法通过调整DOM顺序和flex布局，利用现有CSS选择器实现左侧高亮：

1. 调整HTML中星星的顺序：把星星从高到低排列（比如5星、4星、3星、2星、1星），这样视觉上通过flex反向后会变成1到5左到右。
2. 给.stars容器添加flex反向样式：

.comment-respond .comment-form-rating .stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end; /* 保持视觉左对齐 */
}

3. 保留原有的hover相关CSS即可，此时a:hover ~ a会选中视觉上的左侧星星（因为DOM顺序反向了）：

/* Reset all stars to default color when hovering on the container */
.comment-respond .comment-form-rating .stars:hover a:before {
    color: #ccc;
}

/* Fill stars in gold when they or their left siblings are hovered over */
.comment-respond .comment-form-rating .stars a:hover:before,
.comment-respond .comment-form-rating .stars a:hover ~ a:before {
    color: #FFD700; /* 金色 */
    font-weight: 900; /* 实心样式 */
}

方案B：JavaScript处理hover事件（无需修改HTML结构）

如果不想调整HTML顺序，通过JS给hover的星星及左侧添加临时类：

1. 扩展现有JavaScript代码，添加hover事件处理：

document.addEventListener('DOMContentLoaded', () => {
    const stars = document.querySelectorAll('.comment-respond .comment-form-rating .stars a');

    stars.forEach(star => {
        // 原有点击事件
        star.addEventListener('click', (e) => {
            e.preventDefault();

            stars.forEach(s => s.classList.remove('active'));
            star.classList.add('active');
            let previousSibling = star.previousElementSibling;
            while (previousSibling) {
                previousSibling.classList.add('active');
                previousSibling = previousSibling.previousElementSibling;
            }

            const ratingValue = star.getAttribute('class').split('-')[1];
            const ratingSelect = document.getElementById('rating');
            if (ratingSelect) {
                ratingSelect.value = ratingValue;
            }
        });

        // 添加mouseenter事件：高亮当前及左侧星星
        star.addEventListener('mouseenter', () => {
            star.classList.add('hover');
            let prev = star.previousElementSibling;
            while (prev) {
                prev.classList.add('hover');
                prev = prev.previousElementSibling;
            }
        });

        // 添加mouseleave事件：移除所有高亮
        star.addEventListener('mouseleave', () => {
            stars.forEach(s => s.classList.remove('hover'));
        });
    });
});

2. 修改CSS的hover样式，替换为hover类的样式：

/* 移除原有的hover相关CSS，添加以下代码 */
.comment-respond .comment-form-rating .stars a.hover:before {
    color: #FFD700; /* 金色 */
    font-weight: 900; /* 实心样式 */
}

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