Question

当我将鼠标悬停在图片上时，任何人都知道为什么不给我链接？

我添加了悬停效果并且链接停止了工作：/

任何人都知道如何解决这个问题？

＆＃13;

/*** 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)
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试使用类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>

Answer 2

我不确定，但可能对您有所帮助的 http://jsfiddle.net/5z4paLgr/4/

<强> HTML

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

<强> CSS

.image-home-effect { position: relative; } .image-home-effect:before { content:''; float:left; position:absolute; top:0; left:0; width:500px; height:500px; 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) }

Answer 3

将锚点缠绕在div上

 <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>
        <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>
      </div>
    </div>

绝对位置的链接不起作用

3 个答案: