css - 悬停时如何使新图像出现？

Question

我需要一些关于我正在制作的网站的帮助。我需要将鼠标悬停在图像上时显示新图像。

<div id="buttons">
            <div id="hover-info"><a href="#"><img src="images/Informasjon_button.png" width="120px" height="120px" /></a></div>
            <div><a href="#"><img src="images/Mail_button.png" width="120px" height="120px" /></a> </div>
            <div><a href="#"><img src="images/Facebook_button.png" width="120px" height="120px" /></a></div>
            <div><a href="#"><img src="images/TLF_button.png" width="120px" height="120px" /></a></div>
            <div><a href="#"><img src="images/Portfolio_button.png" width="120px" height="120px" /></a></div>
    </div>

这是 html 以及我到目前为止尝试过的内容。

    #buttons {
        width:45%;
        height:200px;
        margin-top:100px;
        padding-left:130px;
    }
    #buttons div {
        float:left;
        margin-right:100px;
        height:120px;
    }
    #hover-info {
        height:120px;
        width:120px;
    }
    #hover-info a:hover img {
        background-image:url(../images/Informasjon_button_hover.png) no repeat;
        height:120px;
        width:120px;
    }

这就是我到目前为止对 css 的尝试，但我就是做不好。当我将鼠标悬停在图像上时，新图像似乎没有出现。会喜欢一些帮助! :)

Answer 1

img 标签包含它自己的图像，因此不会出现使用 css background-image 分配新图像。

此外，background-image: url(path) no-repeat; 无效。您可以像这样使用带有背景的快捷方式:

#hover-info a{
  background:url(../images/Informasjon_button.png) no repeat;
  height:120px;
  width:120px;
}
#hover-info a:hover{
  background:url(../images/Informasjon_button_hover.png) no repeat;
  height:120px;
  width:120px;
}

并删除 html img 标签。