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> 

注： 你應該只指定了：懸停財產你想改變，我也建議使用類，而不是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>