html - 链接内链接

Question

如果我有这样的代码，如何从 .layer 或 .layer-info 建立链接？我更喜欢没有 JavaScript 的解决方案，但我会为任何类型的解决方案感到高兴。

<div class="layer">
  <img src="http://besttours.com/media/catalog/category/NYC_2-compressor.jpg" alt="">
  <div class="layer-info">
    <h5>NYC</h5>
    <p class="small">USA</p>
    <ul class="absolute-bottom">
      <li><a href="">Hotels</a></li>
      <li><a href="">What to do</a></li>
      <li><a href="">Tickets</a></li>
    </ul>
  </div>
</div>

工作示例在这里:http://codepen.io/anon/pen/VaEPdy

Answer 1

您可以使用 position正在实现它。也有副作用。添加 absolute位于<a>在层内，这已经是相对的。

这样，有几件事:

• 整个图层都在一个可点击的链接中。
• 内部链接，文本链接仍然有效。
• 没有 JavaScript。
• 种链接，里面有链接实现。
• 语义上有效。

img {
  width: 100%;
}
.layer {
  position: relative;
}
.layer-info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.biglink {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  display: block;
  z-index: 999;
}
.absolute-bottom a {
  position: relative;
  z-index: 1000;
}

<div class="layer">
  <a href="http://google.com" class="biglink"></a>
  <img src="http://besttours.com/media/catalog/category/NYC_2-compressor.jpg" alt="">
  <div class="layer-info">
    <h5>NYC</h5>
    <p class="small">USA</p>
    <ul class="absolute-bottom">
      <li><a href="">Hotels</a></li>
      <li><a href="">What to do</a></li>
      <li><a href="">Tickets</a></li>
    </ul>
  </div>
</div>

<a> (大链接)定位于 z-index的 999 ，而三个链接，里面的内容都定位在relative与 z-index的 1000使工作和语义都正确。