如何让 2 张图像出现悬停？

Question

基本上，我想在我的网页上创建一个按钮，当鼠标悬停在它上面时，会显示两个图像，一个在另一个之上。出现的底部图像应该是一个动画.gif，第二个是一个.gif，带有一个白色的单词（'blog'，'music'等）和透明背景（以便它后面的.gif可以仍然可以看到）。我尝试在动画 .gif 上方添加文字，但它的颜色托盘不允许白色（只有浅灰色，根据设计这是不可接受的）。

我对 html/css 还很陌生，所以可能有更好的方法来一起完成这一切。

Answer 1

你会想要一个里面有一个链接。 css应该如下：

div.background_image{
background: url('path/to_your/image.gif') no-repeat 0 0;
}
a.top_image:hover{
width: Xpx;
height: Xpx;
display: block;
background:transparent url('path/to_your/image.gif') no-repeat 0 0;
}

使链接尺寸与您的背景图像 div 尺寸相同。去应该不错。这假设您希望您的背景图像 div 始终存在。 :hover 是让图像出现在鼠标悬停上的原因