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

Question

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

Answer 1

如果你想链接到主页，你应该改变这个

<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');
}