html：添加指向重叠图像的链接[pic]

Question

由于发生了很多错误，并且在堆栈上进行了多次磨合，我（我们）设法以非常特定的方式使两个图像重叠：

这已经实现了：

.container {
  width: 900px;
  margin: auto;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container_2 {
  position: relative;
  padding-top: 41.3%;
}

.imageContainer {
  width: 70%;
  position: absolute;
  top: 0;
}

.psuedoContainer {
  position: relative;
  padding-top: 59%;
}

.psuedoHolder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

img {
  height: 100%;
  width: auto;
}

<div class="centered">
  <div class="container">
    <div class="component">
      <div class="container_2">
        <div class="imageContainer" style="left: 0;">
          <div class="psuedoContainer">
            <div class="psuedoHolder" style="text-align: left;">
              <img src="./img/img_codemesomething.png" />
              <a href="page_appDev.html"/>
            </div>
          </div>
        </div>
        <div class="imageContainer" style="right: 0;">
          <div class="psuedoContainer">
            <div class="psuedoHolder" style="text-align: right;">
              <img src="./img/img_recordmesomething.png" />
              <a href="http://google.de"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如您所见，主要的两张图片（HTML）中包含两个链接。

但是，只有两者之一在工作（谷歌不是一个）。这可能是因为一个图像位于另一个图像的“上方”，因此永远无法单击较低的图像。至少不能像现在一样单击它。

我该如何继续为两个图像添加一个链接，无论用户单击哪个位置，除了两个图像之间的白色部分之外，用户都会转到另一个页面？

谢谢:)

Answer 1

您可以使用标记包装图像

.container {
  width: 900px;
  margin: auto;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container_2 {
  position: relative;
  padding-top: 41.3%;
}

.imageContainer {
  width: 70%;
  position: absolute;
  top: 0;
}

.psuedoContainer {
  position: relative;
  padding-top: 59%;
}

.psuedoHolder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

img {
  height: 100%;
  width: auto;
}

<div class="centered">
  <div class="container">
    <div class="component">
      <div class="container_2">
        <div class="imageContainer" style="left: 0;">
          <div class="psuedoContainer">
            <div class="psuedoHolder" style="text-align: left;">
             <a href="https://stackoverflow.com/questions/55650192/html-add-link-to-overlapping-images-pic/55650729#55650729"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
              </a>
            </div>
          </div>
        </div>
        <div class="imageContainer" style="right: 0;">
          <div class="psuedoContainer">
            <div class="psuedoHolder" style="text-align: right;">
               <a href="https://stackoverflow.com/"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
            </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>