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

我试图创建一个主页按钮，当你“悬停”在图像上它会改变颜色，即时尝试使用CSS来改变悬停图像，并且工作正常，因为它将简单地悬停替换image1与image2（颜色更改图像），但我无法找到一种方式来链接图像，所以当人点击它将他们带到主页。CSS将图像悬停在图像上的链接

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

来源

2013-10-31 user2939704

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

<div id="homebutton"> 
<img src="homelogo.png" alt="tut" width="23" height="23px"> 
</div>

到：

<a href="home.html" id="homebutton">home</a>

注：你应该只指定了：悬停财产你想改变，我也建议使用类，而不是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-31 01:55:43

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

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

来源

2013-10-31 02:13:45

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

回答

相关问题