Question

如何创建一个更大的可点击链接区域，即div指向一个链接，同时包含多个链接，其中常规<a>标记链接到另一个方向而不是容器，即上面的<div>标记？

我想创建这样的索引页面，其中每个文章的行为都像一个大的可点击区域，其中包含许多链接，如图像指向图库或可能是另一个相关主题。那个大容器只是去常规细节文章。最后，我的读者有很大的区域，如果想要去细节，同时在容器内包含许多额外的链接。

是否可以仅使用css或者jquery与css结合来实现这种情况？我需要你的想法。

Answer 1

不，使用多种方法很容易解决这个问题：

您可以在div代码周围设置链接，这是完全可以接受的：
```
<a href="http://example.com">
    <div>anything</div>
</a>
```
然后填写你的div或根据需要设置文章的背景图片。

使用span或second div标签填充整个分隔符，文章作为背景图像。此方法不允许您通过动态内容定期填充div：

CSS：

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML：

<div id="my-div">
    <a href="#" class="fill-div"></a>
</div>

详细介绍：How to make a whole 'div' clickable in html and css without javascript?

Answer 2

是的，仅使用CSS即可实现。

演示http://jsbin.com/dororo/edit?html,css,output

<强> HTML

<div class="Card">
  <a class="Card-title" href="#primary-link">This is a clickable link</a>
  <p>Lorem ipsum dolor sit amet, <a href="#another-link">another link</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

  <!-- Link overlay element -->
  <a class="Card-link" href="#primary-link" aria-hidden="true" tabindex="-1"></a>
</div><!-- end Card -->

注意：我添加了aria-hidden="true" tabindex="-1"以防止屏幕阅读器和键盘用户与此链接进行交互，因为它会是多余的。

<强>萨斯

.Card {
  position: relative;

  // Link overlay
  &-link {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  // Allow other link to be hoverable through the link overlay
  a {
    position: relative;
    z-index: 1;
  }
}

我相信我第一次在Guardian’s homepage上看到了这种特殊技术。

较大的可点击块，即<div>标签指向链接，同时包含多个链接

2 个答案: