html-在li/a悬停时更改图像

我遇到了一个关于imgsrc的非常有趣的问题，它在：hover上改变

---

如您所见，将鼠标悬停在

上，请参见下面的示例。它演示了如何在鼠标悬停事件中更改li的背景图像


希望能有所帮助

ul li a{
 background:#000000 url(/path/to/white/icon) left no-repeat;
 background-color:black;
}
ul li a:hover{
 background:#FFFFFF url(/path/to/black/icon) left no-repeat;
}

试试这个
你可以使用背景图像精灵。这里有一篇关于精灵的文章：这也将减少服务器获取图像的调用，因为所有图像都可以放在一个文件中

CSS示例：

ul li a{
   background: #000000 url('sprite.png') no-repeat;
}
ul li a:hover{
   background-color: #FFFFFF;
}

//then classes for each different link

ul li a.home {
   //white icon
   background-position: 0 0; 
}
ul li a.home:hover {
   //black icon
   background-position: 0 -20px;
}

你不能用css交换img src，你必须使用javascript，或者将图像作为css背景图像（最佳解决方案imo）建议使用css精灵：好吧，它只改变扇区bg，而不是图标？你可以在图标标签或图标容器中使用相同的方法。使用ur方法，它会改变图标，但白色bg不起作用，悬停在扇区上：（（工作！谢谢，但是，如何控制图标位置？我的意思是左/右像素。当有1个以上的位置参数时，图标会消失，但可以使用1