我正在尝试创建一个主页按钮,当您“悬停”在图像上时它会改变颜色,我正在尝试使用 css 在悬停时更改图像并且效果很好,因为它只会在悬停时将 image1 替换为 image2 (颜色改变了图像)但我找不到链接图像的方法,所以当人们点击它时,它会将他们带到主页。
<div id="homebutton">
<img src="homelogo.png" alt="tut" width="23" height="23px">
</div>
#homebutton{
top:6%;
left:0.5%;
position:fixed;
background-image: url('homelogo.png');
height: 23px;
width: 23px;
}
#homebutton:hover{
top:6%;
left:0.5%;
position:fixed;
background-image: url('homelogohover.png')
}
最佳答案
如果你想链接到主页,你应该改变这个
<div id="homebutton">
<img src="homelogo.png" alt="tut" width="23" height="23px">
</div>
到:
<a href="home.html" id="homebutton">home</a>
注意:
您应该只在 :hover 中指定要更改的属性,我还建议为此使用类 ID
#homebutton{
text-indent: -19999px;/*to hide the Home text in the link*/
top:6%;
left:0.5%;
position:fixed;
background-image: url('homelogo.png');
height: 23px;
width: 23px;
}
#homebutton:hover{
background-image: url('homelogohover.png');
}
关于html - CSS 将图像更改为将鼠标悬停在带有链接的图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19697026/