Css 在子菜单（第二个ul元素）中任何li元素悬停时，如何更改第一个ul li的颜色-仅两个跨度图标？

我试图使我的第一个ul li span i类元素（在“a”元素之前和之后）中的两个图标的颜色都改变，但我似乎无法正确地定位它们

我已经设法让我的原始代码工作的每一个a/图标分别悬停和改变他们的颜色，但我不想这样。当我将鼠标悬停在第二个（子菜单）li元素内时，我只想更改父li图标的颜色，即只有其父li的活动子菜单才应更改图标的颜色

如有任何解释或资源可用于学习正确的目标，我们将不胜感激。 只有纯css的答案，谢谢

这是我的css和html代码-

/*通过更改li元素的背景色来测试它是否有效*/
.navigation li>ul>li:悬停。navigation li{
背景：粉红色；
}
/*只有从我的控制器中动态重复的面部图标（从html代码中删除的表达式使其更容易）需要更改颜色*/
.导航li>ul>li:悬停.导航li span i{
颜色：蓝色；
}

面对
面对

还不支持任何CSS父选择器。实现所需功能的唯一方法是使用Javascript

下面是一个如何做的快速示例。当子菜单悬停时，Javascript

onmouseover

和

onmouseleave

事件分别在父菜单上添加和删除活动的

类

然后，您可以使用
li.active
应用任何CSS规则，在图标上应用某种样式


var items=document.querySelectorAll（“ul>li>ul>li”）；
对于（变量i=0；iul->li
parentLi.classList.add（“活动”）；
}
items[i].onmouseleave=函数（事件）{
var li=event.src元素；
if（li.tagName！=“li”）li=li.parentElement；//如果relatedTarget=span在li内部，li=relatedTarget.parentElement
var parentLi=li.parentElement.parentElement；//li->ul->li
parentLi.classList.remove（“活动”）；
}
}
li.active{
颜色：蓝色；
}

菜单1

菜单2

子菜单2.1
子菜单2.2
子菜单2.3



菜单3

子菜单3.1
子菜单3.2


CSS还没有父选择器，您应该使用Javascript来执行这种行为。你对它的Javascript解决方案感兴趣吗？谢谢你让我知道它还不受支持。我将试用您编写的javascript方法。再次感谢你的帮助！。如果您需要帮助设置，请不要犹豫，如果它解决了您的问题，请验证答案。我使用了您的js代码并将其放在angular应用程序的app.js文件中，然后在css中尝试使用此代码，但颜色没有改变。navigation li.active:hover md content ul li span i{color:blue；}.li子菜单：悬停md content ul li.active span i{color:blue；}指向子菜单li并将父图标的颜色更改为蓝色也将不起作用。我做错了吗？我需要添加jquery吗？如果可能的话，你能用我给定的html代码写出正确的css代码吗，先生。忘记选择器
：hover
使用此技术，类
active
将直接应用于父
li
，因此你可以直接使用类似
li.active xx yy zz
的东西。在您的情况下，它应该类似于
.navigation li.active i
。