[英]How to make a new image appear when hovering?
I need some help with a webiste I'm making. 我正在制作的网站需要一些帮助。 I need a new image to appear while hovering over the image.
将鼠标悬停在图像上时,需要显示新图像。
<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>
This is the html and what i've tried so far. 这是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;
}
And this is what I've tried so far with the css, but I just can't get it right. 到目前为止,这是我在CSS中尝试过的方法,但我做对了。 The new image don't seem to appear when I'm hovering on the image.
当我将鼠标悬停在图像上时,新图像似乎没有出现。 Would love some help!
希望有帮助! :)
:)
img tag contains it's own image so assigning new image with css background-image wouldn't appear. img标签包含它自己的图像,因此不会显示具有CSS背景图像的新图像。
Also, background-image: url(path) no-repeat;
另外,
background-image: url(path) no-repeat;
is invalid. 是无效的。 You can use shortcut with background like this:
您可以像这样在背景中使用快捷方式:
#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;
}
And remvoe the html img tag. 并删除html img标签。
Just use the below code: 只需使用以下代码:
<a href="#"><img src="path-to-default-img" onmouseover="this.src='path-to-img-on-hover'" onmouseout="this.src='path-to-default-img'"></a>
Make sure you do not mess up the single quotes
and double quotes
when doing copy paste os changing src
. 确保在执行
src
复制粘贴操作时,不要弄乱single quotes
和double quotes
。
Hope this helps. 希望这可以帮助。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.