html - CSS将图片更改为将鼠标悬停在带有链接的图片上

我试图创建一个主页按钮，当您将鼠标“悬停”在图像上时，它会改变颜色，我尝试使用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');
}