Html 使用：悬停CSS选择器（角度）时出现意外行为

我有一份有三层深度的菜单。它从类别开始，然后是子类别，最后是最后的链接。其中一些链接已经处于第二级甚至第一级，但这不是问题。菜单很好用

问题是我试图让它看起来很别致，所以我在每个div中添加了一个类来指定菜单级别。您可以在此处看到完整的角度模板。请注意，这些类是“lvl0”、“lvl1”、“lvl2”：

因此，该行为对于第一个级别非常有效，但正如您所看到的，第二个级别的所有行都会高亮显示，而不仅仅是我悬停的那一行：

第三级也是如此

---

你知道我做错了什么吗？我正在添加Angular标记，以防它与我的模板代码有关。谢谢大家!

问题是您已经将样式应用于div，并且由于div是嵌套的，样式将层叠并将其中的所有内容转换为颜色-您可以尝试将样式直接应用于跨度以避免这种情况。我还删除了悬停冒号前的空格

.lvl0:hover>span{/*将hover保留在div上，但设置span的样式*/
颜色：橙色；
}
.lvl1:悬停>跨距{
颜色：红色；
}
.lvl2：悬停>跨距{
颜色：绿色；
}

测试0
测试1
测试2

问题在于您已将样式应用于div，并且由于div是嵌套的，样式将层叠并将其中的所有内容转换为颜色-您可以尝试将样式直接应用于跨度以避免这种情况。我还删除了悬停冒号前的空格

.lvl0:hover>span{/*将hover保留在div上，但设置span的样式*/
颜色：橙色；
}
.lvl1:悬停>跨距{
颜色：红色；
}
.lvl2：悬停>跨距{
颜色：绿色；
}

测试0
测试1
测试2
悬停的
：hover
基本上是向下传播到其他级别。不要直接在父级上使用
CSS
。取而代之的是，在诸如span等方面使用它。
检查钢笔以解决您的问题。在您的情况下，您也可以使用
标记，而不是span，它在那里关闭，基本上是下一个级别的同级

.lvl:hover {
    //common for all
    color: orange;
}

：hover
基本上是向下传播到其他级别。不要直接在父级上使用
CSS
。取而代之的是，在诸如span等方面使用它。
检查钢笔以解决您的问题。在您的情况下，您也可以使用
标记，而不是span，它在那里关闭，基本上是下一个级别的同级

.lvl:hover {
    //common for all
    color: orange;
}

在
：hover
…之前没有空格。您的意思是执行
。lvl0:hover
？在lvl0内悬停的空间中，您的目标项目。这也与角度无关，只是cssIt没有改变任何东西；上一级规则一直应用于所有子级div:/这是因为您的项目是嵌套的，因此当您将鼠标悬停在level1上，并且所有内容都在lvl1内时，所有内容都将变为橙色。您有jquery吗？我知道你没有选择jquery，但是如果你有它，你可以用它来做
这个。hover（）
，它可能会工作。前面没有空格
：hover
…你的意思是做
。lvl0:hover
？在lvl0内悬停的空间中，您的目标项目。这也与角度无关，只是cssIt没有改变任何东西；上一级规则一直应用于所有子级div:/这是因为您的项目是嵌套的，因此当您将鼠标悬停在level1上，并且所有内容都在lvl1内时，所有内容都将变为橙色。您有jquery吗？我知道你没有选择jquery，但是如果你有它，你可以用它来做
这个.hover（）
，它可能会工作。
.lvl:hover {
    //common for all
    color: orange;
}