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

Answer 2

如果由於某些原因需要保留div，則可以添加onclick事件處理程序。

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