为什么链接在使用href和overlays时不起作用？

Question

几天来一直在试图弄清楚这件事，但根本找不到真相。我有一个图像，一个滚动图像，以及下面的文本。文本链接到新页面很好，但图片只是拒绝链接。我试过调整z级，但没有效果.希望有人能帮忙。

<div class="col-md-10 col-md-offset-1">
<div class="row" id="societies-cards">
<div class="col-sm-6 col-lg-4">
<div class="thumbnail">
<div class="card-image"><a href="/join/"><img alt="Join" class="card-img-top" src="/join.jpg" /> </a>

<div class="image-overlay"><a href="/join/">&nbsp;</a></div>
<a href="/join/"> </a></div>

<div class="caption">
<h3 class="text-center"><a href="/join/">JOIN</a></h3>
</div>
</div>
</div>

上面是图像的html编码--我们使用类来分离页面上的内容，卡片图像是您看到的原始图像。当你把手指或鼠标移到图像上时，叠加就是你得到的，下面显示的是标题。我为了隐私改变了链接，但希望你能理解。

下面是与图像相关的CSS。

                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                height: 100%;
                width: 100%;
                opacity: 0;
                transition: 0.5s ease;
                background: rgba(0, 0, 0, 0.4);

和

                z-index: -1;
                width: 100%;
            }
            #societies-cards .thumbnail .caption {
                background-color: white;
                box-shadow: 0px -8px 10px -1px white;
                z-index: 1;
                position: relative;
                width: 100%;

感谢任何人谁决定看看这个词汤-必须学习所有的工作，因为我不是最初构建这个网页，这是很难想出一些事情。

Answer 1

问题是锚标签位于div.Image覆盖层内。相反，您应该用锚标签包装div.image-overlay。

在此之前：

<div class="image-overlay"><a href="/join/">&nbsp;</a></div>

之后：

<a href="/join/"><div class="image-overlay"></div></a>

另一个选择

您可以将整个html树封装在一个锚标记中。这样，您就不必在"Box“中有多个定位标签。

您可能需要更改一些CSS才能完成此工作。

<a href="/join/" class="col-md-10 col-md-offset-1">
  <div class="row" id="societies-cards">
    <div class="col-sm-6 col-lg-4">
      <div class="thumbnail">
        <div class="card-image">
          <img alt="Join" class="card-img-top" src="/join.jpg" />

          <div class="image-overlay"></div>
        </div>

        <div class="caption">
          <h3 class="text-center">JOIN</h3>
        </div>
      </div>
    </div>
  </div>
</a>