css-悬停不适用于li中的svg元素

李，我有一张单子。它有svg图标和文本。我为li提供了悬停效果来更改文本和svg填充颜色，但我遇到了一个问题

当我将鼠标悬停在li元素上时，文本会更改其颜色，但svg不会更改。但是当我放置鼠标指针（悬停在svg元素上）时，它会改变颜色。但预期的行为是，每当我在列表中的任何位置上移动时，它都会改变颜色

my code structure: html 

     <div>
     <li>
     <svg>
     <a>  </a>
     </div>


  css:

       li:hover{ color:red; fill:red;}

       svg:hover { color:red;fill:red;}

我的代码结构：html

css:
li:悬停{颜色：红色；填充：红色；}
svg:hover{color:red；fill:red；}

当li悬停时，您应该选择svg。你应该有这样的东西：

HTML

...
正文

CSS

将路径添加到svg选择器

li：悬停svg路径{
填充物：红色；
}
李：悬停{
颜色：红色；
}

li:hover svg，li:hover a{
颜色：红色；
填充物：红色；
}

链接元素

color

适用于文本而不是SVG元素。您可能需要“fill”。我添加了fill，但它不起作用。请提供一个新的答案。请查看编辑后的答案，您正在这样做吗？否则，请在类似的代码笔中添加一个代码示例。是的，我忘记了在css中添加路径。li:hover svg path{fill:red；}