製作懸停圖片鏈接

Question

不知道如何標題字，我試圖做一個圖像的鏈接，圖像有懸停「屬性」不知道如何字的問題..
以下是我的代碼：

HTML

<div style="position: relative; left: 0; top: 0; bottom: 100px;"> 
    <img src="pic\980_pcb.jpg" style="width:908.2px;height:398.05px position: relative; top: 0; left: 0;" /> 
    <span class="imgswap"> 
    <a id="imgswap" href="#GPU"></a> 
    </span> 
</div> 

CSS

span.imgswap { 
    background - image: url("pic/gpu_replace.jpg") no - repeat; 
    height: 167 px; 
    width: 163 px; 
    position: absolute; 
    top: 132.5 px; 
    left: 286.5 px; 
    background - repeat: no - repeat; 
    display: block; 
} 

span.imgswap: hover { 
    background: url("pic/gpu_replace.jpg") no - repeat; 
} 

Answer 1

簡單地說你span.imgswap內<a>標籤（而不是VIC電子反之亦然）。因此，HTML應該看起來像這樣：

<a id="imgswap" href="#GPU"><span class="imgswap"></span></a> 

Answer 2

只是繞標籤扭曲標籤，該圖像將成爲鏈接。

Answer 3

例

http://codepen.io/anon/pen/vENbRM

<a class="link" href="#"> 
    <img class="textimg" src="http://blackicemedia.com/presentations/2013-02-hires/img/awesome_tiger.svg" /> 
</a> 

---

img.textimg { 
    height: 175px; 
    width: 175px; 
} 

img.textimg:hover { 
    background: black; 
}