Гиперссылка не работает/появляется на CSS hover

Question

У меня есть гиперссылка в моем тестовом скрипте.

Когда я наводил курсор на div, появляется увеличительное стекло. Я также должен был бы нажать и посетить Google, но это не удается.

Почему ссылка не работает?

Спасибо за любую помощь.

Демо:http://jsfiddle.net/vhcfha6s/

span.text-content { 
 
    background: rgba(23, 165, 195, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 
ul li:hover span.text-content { 
 
    opacity: 1; 
 
} 
 
.imgCont { 
 
    display: table-cell;/*set display to table cell*/ 
 
    vertical-align: middle;/*add vertical align middle*/ 
 
    text-align: center;/*add text align to center for horizontal align too*/ 
 
}

<ul> 
 
    <li> 
 
    <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;"> 
 
     <a href="http://www.google.com/"></a> 
 
     <span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

Вам нужно обернуть span S внутри a тега. В настоящее время ваш a не имеет никакого контента и, следовательно, 0px x 0px small.

<ul> 
    <li> 
    <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;"> 
     <a href="http://www.google.com/"> 
      <span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span> 
     </a> 
    </div> 
    </li> 
</ul> 

Answer 2

Я редактировал свой пост:

http://jsfiddle.net/vhcfha6s/2/

Вы просто должны обернуть ссылку вокруг двух элементов "пролетных". Примерно:

<ul> 
    <li> 
    <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;"> 
     <a href="http://www.google.com/"> 
     <span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span></a> 
    </div> 
    </li> 
</ul> 

Answer 3

его закрыл знак гнева перед областью наведения. вам нужно закрыть якорный тег Ofter жизнеспособной области парения как

Ex: http://jsfiddle.net/Muthukumaru/vhcfha6s/3/

<a href="http://www.google.com/"> 
<span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span> 
</a>