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同时使工作和语义都正确。

链接内链接

1 个答案: