当我将鼠标悬停在图片上时,任何人都知道为什么不给我链接?
我添加了悬停效果并且链接停止了工作:/
任何人都知道如何解决这个问题?
/*** 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>
&#13;
答案 0 :(得分: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>
答案 1 :(得分:0)
我不确定,但可能对您有所帮助 的 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)
}
答案 2 :(得分:0)
将锚点缠绕在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>