Html 无法阻止禁用的复选框受CSS中的悬停事件的影响

我有两组复选框，它们充当星级系统。其中一个星级已禁用（通过使用复选框上的

disabled

属性），而另一个未禁用

当用户将鼠标悬停在星级评定系统中的星级上时，它们的颜色会变为黄色。然而，如果星级评定系统被禁用，我不希望它们在覆盖时改变颜色。我试图通过在CSS中的复选框悬停事件中使用

：not（[disabled]）

来实现这一点，但是星星在悬停时仍然会改变颜色

.rating，
.评级标签{
保证金：0；
填充：0；
左边距：自动；
}
.评级{
边界：无；
浮动：左；
}
.评级输入{
显示：无；
}
.评级标签：之前{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.评分.一半：之前{
内容：“\f089”；
位置：绝对位置；
}
.评级标签{
颜色：#ddd；
浮动：对；
}
.额定值输入：选中~标签，
/*单击时显示金星*/
.额定值：未（：选中）：未（[禁用]）标签：悬停，
/*悬停当前恒星*/
.额定值：未（：选中）标签：悬停~标签{
颜色：#FFD700；
}
/*更改额定值时悬停当前星号*/
.额定值输入：选中~标签：悬停，
.评级标签：悬停~输入：选中~标签，
/*减轻电流选择*/
.额定值输入：选中~标签：悬停~标签{
颜色：#FFED85；
}

由于复选框被禁用，此星级系统在悬停时不应改变颜色




这一个做它应该做的（在悬停时改变它的颜色）

您要求CSS检查容器类是否具有disabled属性。您需要询问类中的

输入是否具有此属性

比如：

.rating input:checked~label,
.rating input:not(:checked):not(:disabled) + label:hover,
.rating input:not(:checked):not(:disabled) + label:hover~label {
    color: #FFD700;
}

注:
您也可以删除第一条和第三条规则，只需应用第二条规则即可

片段：

.rating，
.评级标签{
保证金：0；
填充：0；
左边距：自动；
}
.评级{
边界：无；
浮动：左；
}
.评级输入{
显示：无；
}
.评级标签：之前{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.评分.一半：之前{
内容：“\f089”；
位置：绝对位置；
}
.评级标签{
颜色：#ddd；
浮动：对；
}
.额定值输入：选中~标签，
.额定值输入：未（：选中）：未（：禁用）+标签：悬停，
.额定值输入：未（：选中）：未（：禁用）+标签：悬停~标签{
颜色：#FFD700；
}
.额定值输入：选中~标签：悬停，
.评级标签：悬停~输入：选中~标签，
.额定值输入：选中~标签：悬停~标签{
颜色：#FFED85；
}

由于复选框被禁用，此星级系统在悬停时不应改变颜色




这一个做它应该做的（在悬停时改变它的颜色）

我回滚了您的工作，因为问题应该包含问题，而不是固定的解决方案。我在代码段上测试了它，您的更新似乎工作正常。最好在您的项目上进行现场测试，但我承认这里的代码可能很诱人<代码>：-）

您有一个代码问题：您在第一个列表中的一个输入未被禁用。@Martin谢谢，修复了这个问题