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

【问题标题】：Is it possible to change the clickable area of links using CSS?是否可以使用 CSS 更改链接的可点击区域？
【发布时间】：2012-12-22 03:51:58
【问题描述】：

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

<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 但它没有解决问题。有可能吗？

【问题讨论】：

标签： html css

【解决方案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> 标记内的任意位置。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我遇到了类似的问题，并通过将样式 z-index:3 添加到包装 div 来解决它。

【讨论】：