1

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

2 回答 2

0

如果你想建立一个主页的链接，你应该改变这个

<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');
}
于 2013-10-31T01:55:43.757 回答
0

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

<div id="homebutton" onclick="location.href='home.html'">
    <img src="homelogo.png" alt="tut" width="23" height="23px">
</div>
于 2013-10-31T02:13:45.653 回答