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标签。

Answer 2

只需使用以下代码：

<a href="#"><img src="path-to-default-img" onmouseover="this.src='path-to-img-on-hover'" onmouseout="this.src='path-to-default-img'"></a>

确保在复制粘贴操作系统更改single quotes时不会弄乱double quotes和src。

希望这会有所帮助。：）

悬停时如何显示新图像？

2 个答案: