图标悬停不'；t当与列表项锚定一起悬停时-HTML

我试图在我的导航列表项上创建一个效果：当鼠标悬停在列表项锚定标记上（甚至处于活动状态）时，

中的图像应替换为图像的彩色版本。文本的颜色和图标的颜色必须一起更改

下面是我正在使用的代码，但它不起作用。请参见此处的差异：
要求的结果：
实际结果：

nav ul li a:悬停，
.主动{
颜色：#3B94D9；
}
nav ul li:悬停{
边框底部：2px颜色#3B94D9；
}
跨度{
保证金权利：4px；
边缘顶部：10px；
}
span#home{
宽度：20px；
高度：18px；
背景：url（'../img/home.png'）不重复；
显示：内联块；
垂直对齐：底部对齐
}
span#主页：悬停{
背景：url（'../img/home hover.png'）不重复；
}
span#notif{
宽度：20px；
高度：18px；
背景：url（'../img/bell.png'）不重复；
显示：内联块；
垂直对齐：底部对齐
}
span#notif:悬停{
背景：url（'../img/bell hover.png'）不重复；
}
span#msg{
宽度：20px；
高度：18px；
背景：url（'../img/messages.png'）不重复；
显示：内联块；
垂直对齐：底部对齐
}
span#msg:悬停{
背景：url（'../img/messages hover.png'）不重复；
}

您很接近，但在CSS中，只有当跨度直接悬停在上方时，您才以跨度为目标。当包含

您很接近，但在CSS中，只有当跨度直接悬停在上方时，您才以跨度为目标。当包含

span#home:hover {
  background: url('../img/home-hover.png') no-repeat;
}

a:hover span#home {
  background: url('../img/home-hover.png') no-repeat;
}