Question

我试图创建一个主页按钮，当你“悬停”在图像上时它将改变颜色，即时尝试使用css来改变悬停时的图像并且工作正常，因为它只是悬停用image2替换image1（颜色改变了图像）但是我找不到链接图像的方法，所以当用户点击它时会将它们带到主页。

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

Answer 2

如果你需要保留div（由于某种原因），你可以添加一个onclick事件处理程序。

<div id="homebutton" onclick="location.href='home.html'">
    <img src="homelogo.png" alt="tut" width="23" height="23px">
</div>

CSS将图像悬停在带有链接的图像上

2 个答案: