Question

我使用overlay div编码链接图像：

<div class="imageBlock">
  <a href="http://www.google.com">
    <img src="https://placeimg.com/640/480/any">
  </a>
  <a href="http://www.twitter.com">
    <img src="https://placeimg.com/640/480/any">
  </a>
  <a href="http://www.facebook.com">
    <img src="https://placeimg.com/640/480/any">
  </a>
  <div class="overlayButton">
    Go Google
  </div>
</div>

由于它是Jquery Gallery plugin的一部分，因此只能看到一个图像。点击它会启动一个灯箱滑块。

我所需要的是让ovelay div也链接到相同的图像链接目的地，就像现在当我将鼠标悬停在叠加div上时，它似乎只是普通的块。

代码段： https://jsfiddle.net/z9mda5wv/

Answer 1

只需将叠加层置于锚标记

中

<div class="imageBlock">
  <a href="http://www.google.com">
    <img src="https://placeimg.com/640/480/any">
    <div class="overlayButton">
      Go Google
    </div>
  </a>
</div>

Answer 2

我建议你这样做，使用伪元素。

干净简单，没有额外的标签干扰初始结构。

＆＃13;

.imageBlock a {
  position: relative;
  display: none;
}
.imageBlock a:first-child{
  display: inline-block;
}
.imageBlock a:after {
  content: attr(data-buttontext);
  position: absolute;
  opacity: 0.8;
  background-color: black;
  color: white;
  left: 50%;
  margin-left: -75px;
  top: 50%;
  margin-top: -20px;
  height: 40px;
  width: 150px;
  text-align: center;
  line-height: 40px;
}

＆＃13;

<div class="imageBlock">
  <a data-buttontext="Goooo Google" href="http://www.google.com">
    <img src="https://placeimg.com/320/240/any">
  </a>
  <a data-buttontext="Goooo Twitter" href="http://www.twitter.com">
    <img src="https://placeimg.com/320/240/any">
  </a>
  <a data-buttontext="Goooo Facebook" href="http://www.facebook.com">
    <img src="https://placeimg.com/320/240/any">
  </a>
</div>

＆＃13;

叠加div链接到相同的相关div目标地址

2 个答案: