html - 绝对位置的链接不起作用

Question

有人知道当我将鼠标悬停在图片上时为什么不给我一个链接吗？

我添加了悬停效果，链接停止工作了:/

有人知道我该如何解决这个问题吗？

/*** effect inner-shadow ***/
.image-home-effect {
  position: relative;
}
.image-home-effect:before {
  content:'';
  float:left;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:20;
  cursor: pointer;
  margin-top: -12px;
  height: 222px;

}
.image-home-effect:before {
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition:all 1s;
}
.image-home-effect:hover:before {
  box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
  -moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9)
}

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  <div class="content-box">
    <a href="http://www.onet.pl/" target="_blank"><h2>Meble biurowe</h2></a>
    <div class="image-home-effect">
      <a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow"><img src="images/meble-biurowe.jpg"></a>
    </div>
  </div>
</div>

Answer 1

尝试将您的 anchor 标记放在类 image-home-effect 的 div 外部。

像这样:

<a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow">
    <div class="image-home-effect">
      <img src="images/meble-biurowe.jpg">
    </div>
</a>