HTML/CSS圖像懸停

我想創建一個簡單的圖像懸停與AboutUsLink.png和AboutUsColourLink.png但我不知道如何。HTML/CSS圖像懸停

HTML：

<section class="link1"> 
    <a href="#SecondLink"><img src="images/LogoAndLinks/AboutUsLink.png"></a> 
</section>

CSS：

.link1 { 
    height: 100px; 
    width: 100px; 
    margin: auto; 
    bottom: 0; 
    left: 0; 
    top: 0; 
    right: 0; 
    margin-top: 35%; 
    margin-left: 22%; 
    position: absolute; 
    z-index: 1; 
}

來源

2013-10-27 Bartek Grzesiak

這是很基本的。請先詢問谷歌 –

<section class="link1"> 
    <a href="#SecondLink"> 
    <img src="images/LogoAndLinks/AboutUsLink.png" 
      onmouseover="this.src='images/LogoAndLinks/AboutUsColourLink.png';" 
      onmouseout="this.src='images/LogoAndLinks/AboutUsLink.png';" /> 
    </a> 
</section>

來源

2013-10-27 17:28:03

在這種情況下不會推薦使用javascript。 – codedude

的CSS解決這個問題，請將您的元素，像這樣：

<a href="#SecondLink"><div id="SecondLink"></div></a>

，然後使用CSS設置div背景

#SecondLink { 
    background-image: url('images/LogoAndLinks/AboutUsLink.png'); 
} 

#SecondLink:hover { 
    background-image: url('images/LogoAndLinks/AboutUsColourLink.png'); 
}

看看這個fiddle

來源

2013-10-27 17:34:51 zoranc

出於某種原因，它不適用於我的圖像，但它使用我們說的背景顏色：綠色; –

哦，圖像路徑中缺少引號......查看編輯的答案 – zoranc

仍然無法正常工作：/ –

HTML/CSS圖像懸停

回答

相關問題