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

Question

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

这就是我想要的结果：

箭头将是小图像，当链接悬停时将切换。我如何使用CSS做到这一点？

Answer 1

在您认为最适用的元素上使用CSS background: url()...。这是文档和演练：https://developer.mozilla.org/en-US/docs/Web/CSS/background。

另外，您可能还想考虑使用精灵，https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites

Answer 2

将图像设置为背景图像为div（具有设置的宽度和高度），您可以使用css更改该值。

理想情况下，将两个图形放在一个图像中，这样您就可以移动背景位置，在转换过程中不会出现任何闪烁（Google“css image sprites”）。

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

你也可以有两个图像并使用display：block和display：none来显示/隐藏它们，但我不认为这是最好的方法。

Answer 3

http://www.w3schools.com/css/css_image_sprites.asp

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