Question

我尝试过使用z-index和position:relative进行试验，但我似乎无法让它发挥作用。

我已经做到了这一点，一旦将鼠标悬停在图像上，就会出现一个超链接，但由于某种原因，您无法单击超链接。有人可以告诉我如何把它带到前面吗？

这是我的代码：

.caption {
  display: inline-block;
  position: relative;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  margin-right: 1.25em;
  margin-top: 1.250em;
  margin-bottom: 2.188em;
  margin-left: 1.25em;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  max-width: 100%;
  height: auto;
}

.caption::before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  transition: background .35s ease-out;
}

.imageh:hover+.caption::before {
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .5);
}

.imageh {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
}

.caption__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px;
  color: white;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: -webkit-transform .35s ease-out;
  transition: transform .35s ease-out;
}

.imageh:hover+.caption .caption__overlay {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.caption__media {
  padding-top: 130px;
  max-width: 100%;
}

<span class="imageh"></span>
<div class="caption">
  <img src="http://bsnscb.com/data/out/78/27073638-free-farm-wallpapers.jpg" />
  <div class="caption__overlay">
    <div class="caption__overlay__content">
      <h1 style="text-align:center" class="caption__media"><a style="color:white;" href="artists.html">OUR ARTISTS</a></h1>
    </div>
  </div>
</div>

由于

Answer 1

而不是在悬停时使用span元素，它是图像容器的兄弟（在悬停期间很难避免闪烁）。您可以将鼠标悬停在标题容器div上。请参阅下面的示例代码

.caption {
  display: inline-block;
  position: relative;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  margin-right: 1.25em;
  margin-top: 1.250em;
  margin-bottom: 2.188em;
  margin-left: 1.25em;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  max-width: 100%;
  height: auto;
   
}

.caption::before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  transition: background .35s ease-out;
}

.caption:hover::before {
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .5);
}

.imageh {
/*  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;*/
}

.caption__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px;
  color: white;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: -webkit-transform .35s ease-out;
  transition: transform .35s ease-out;
 
}

.caption:hover .caption__overlay {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.caption__media {
  padding-top: 130px;
  max-width: 100%;
}

<span class="imageh"></span>
<div class="caption">
  <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" />
  <div class="caption__overlay">
    <div class="caption__overlay__content">
      <h1 style="text-align:center" class="caption__media"><a style="color:white;" href="artists.html">OUR ARTISTS</a></h1>
    </div>
  </div>
</div>

Answer 2

除了两件事之外，保持原样。使用class＆＃34; imageh＆＃34;设置元素。 z-index 0和class＆＃34; caption__overlay__content＆＃34;使用z-index 1。

无法在div下单击超链接

2 个答案: