使悬停图像成为链接

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>标记内（而不是反之亦然）。所以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;
}