我需要一些关于我正在制作的网站的帮助。我需要将鼠标悬停在图像上时显示新图像。
<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 的尝试,但我就是做不好。当我将鼠标悬停在图像上时,新图像似乎没有出现。会喜欢一些帮助! :)
最佳答案
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 标签。
关于css - 悬停时如何使新图像出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22501461/