是否可以使用CSS更改链接的可点击区域？

Question

我有一个代码块看起来像这样:

<p class="cont">
 <a href="otherpage.php" class="link"><img src="test.jpg" alt="" width="100" height="100"/></a>
</p>

我有一些像这样的CSS:

.cont {
  width:200px;
  height:200px;
}
.cont:hover {
  background-color:#CCC;
}

我的问题是,如果可以改变链接区域的大小,那么它就占用了整个区域

区域因此使其可点击 - 不仅是图像.我已经尝试给.link类提供宽度和高度并使用display:block但它没有做到这一点.它甚至可能吗？

Answer 1

请参阅:http://jsfiddle.net/sSGJV/
或200px尺寸:http://jsfiddle.net/sSGJV/1/

HTML:

<a href="http://www.google.com/">
    <img src="http://www.google.com/images/logos/ps_logo2.png" />
    <br />
    Click to go to the Googles.
</a>

CSS:

a {
    display: block;
    border: 3px dashed #000;
    text-align: center
}

如您所见,您可以单击<a>标记内的任何位置.