Html 使用CSS悬停显示和消失图像

我正在制作一个下拉菜单，我想完全使用CSS。在链接中，我不仅有悬停时需要更改的文本，还有一个图像。更改文本的颜色很容易。然而，我不知道如何交换悬停上的图像

以下是我想要的结果：

其中箭头将是小图像，当链接悬停在上方时，这些图像将切换。如何使用CSS实现这一点？

使用CSS背景：url。。。在您认为最适用的元素上。以下是文档和演练：

---

在一个旁注下，您可能需要考虑使用SpRITE，

将图像作为背景图像设置为具有宽度和高度的DIV，并且可以用CSS更改该值。p> 理想情况下，将两个图形放在一个图像中，这样您就可以移动背景位置，并且在转换Google css图像精灵时不会出现任何闪烁

我相信您需要使用javascript来更改嵌入图像的src

您也可以有两个图像，并使用display:block和display:none适当地显示/隐藏它们，但我认为这不是最好的方法

---

检查图像精灵-悬停效果部分。

你能发布html/css和小提琴吗？