带链接href的锚标记现在正在处理不显示可点击的
/****** PLACE YOUR CUSTOM STYLES HERE ******/
.gridpb {
padding-bottom: 24px
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.hovereffect:hover img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
filter: grayscale(1) blur(3px);
-webkit-filter: grayscale(1) blur(3px);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect a.info, .hovereffect h2 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
opacity: 0;
filter: alpha(opacity=0);
color: #fff;
text-transform: uppercase;
}
.hovereffect:hover a.info, .hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
&#13;
<div class="col-sm-4 gridpb">
<div class="hovereffect">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />
<div class="overlay">
<h2>Scientific Funk - 1988 EP</h2>
<a class="info" href="https://www.beatport.com/release/1988-ep/1577944" target="_blank" >Buy on Beatport</a>
</div>
</div>
</div>
&#13;
带链接href的锚标记现在正在处理不显示可点击的
<div class="col-sm-4 gridpb">
<div class="hovereffect">
<img src="img/8.jpg" />
<div class="overlay">
<h2>Scientific Funk - 1988 EP</h2>
<a class="info" href="https://www.beatport.com/release/1988-ep/1577944" target="_blank">Buy on Beatport</a>
</div>
</div>
</div>
锚标记在悬停效果之外正常工作但不在内部,我想在里面
答案 0 :(得分:0)
在你的问题中 如果你删除target =“_ blank”那么它的成功运作
问题是,如果您需要帮助,那么target =“_ blank”无法正常工作,然后重新启用此链接 click here
我希望它对你有所帮助
答案 1 :(得分:0)
这实际上不是您的代码的问题。 stackoverflow代码段是在此页面中运行的iframe,可防止在浏览器中打开新的父窗口。我只是将你的代码复制到这个JSFiddle,它工作得很好!
只需在我的JSFiddle上查看您的代码here。
<div class="col-sm-4 gridpb">
<div class="hovereffect">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />
<div class="overlay">
<h2>Scientific Funk - 1988 EP</h2>
<a class="info" href="https://www.beatport.com/release/1988-ep/1577944" target="_blank" >Buy on Beatport</a>
</div>
</div>
</div>