基于table实现Font Awesome五星评分悬停点亮异常问题咨询

问题原因 #

你的CSS选择器使用不符合DOM结构规则：~ 是同级兄弟元素选择器，你原有代码中label:hover ~ td label的写法不成立——label和td不是同级元素，二者被嵌套在同一个td节点内，无法跨层级匹配其他td节点。

修正方案 #

HTML代码无需改动，仅替换CSS代码即可：

.rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    color: #ddd; /* 未选中状态颜色 */
}
.rating td input {
    display: none;
}
/* 悬停逻辑：匹配当前td内的图标，以及当前td之后所有td内的图标（rtl布局下对应视觉上更靠左的前置图标） */
.rating td:hover label,
.rating td:hover ~ td label,
/* 选中逻辑：匹配当前选中单选框对应的图标，以及选中单选框所在td之后所有td内的图标 */
.rating td input:checked + label,
.rating td:has(input:checked) ~ td label {
    color: #ffc107; /* 选中状态颜色 */
}

如果需要兼容不支持:has选择器的旧版浏览器，可以调整DOM结构，将input节点移到tr下作为td的同级元素，调整对应选择器即可实现兼容。

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