якорь тег не работает на зависания изображения эффекта

Question

якоря тег ссылки 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); 
 
}

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

якорь тег ссылки 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> 

якорный тэг правильно работает вне эффекта наведения, но не внутри, и я хочу внутри

Answer 1

В ваших проблемах если удалить цель = «_blank», то он успешно работает

проблема заключается в том, что цель = «_blank» не работает, если вы хотите помочь в том, что тогда refure этой ссылки click here

я надеюсь, что это полезна для вас

Answer 2

На самом деле это не проблема с вашим кодом. Фрагмент кода stackoverflow - это iframe, запущенный на этой странице, который препятствует открытию нового родительского окна в вашем браузере. Я просто скопировал ваш код в этот JSFiddle, который работает нормально!

Посмотрите на свой код в действии here на моем JSFiddle.

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