是否可以使用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>标记内的任意位置。

Answer 2

简而言之，有一篇关于这个主题的博文可以在这里找到：http://csswizardry.com/2011/01/maximising-hit-area-for-usability/

Answer 3

我有一个类似的问题并通过将样式z-index：3添加到包装div来解决它。