анкерная ссылка над изображением

Question

На изображении есть два анкерных ссылки. Щелчок в любом месте изображения откроет наложение, чтобы отобразить полноразмерное изображение. Нажав на кнопки, вы откроете диалоговые окна общего доступа к facebook/twitter.

Что происходит, когда нажаты кнопки, открывается диалог и наложение. Как остановить наложение при появлении ссылки на привязку.

HTML:

<li style="display: block; opacity: 1;"> 
    <a href="#"> 
    <div class="thumbPan"> 
     <img src="#" class="gallThumb">   
    </div> 
    </a> 
    <div class="share_buttons"> 
     <a class="fshare" href="#" onclick="window.open(this.href, '',''); return false;"></a> 
     <a class="tshare" href="#" onclick="window.open(this.href, '',''); return false;"></a> 
    </div> 
</li> 

CSS:

.share_buttons { position:absolute;} 
.fshare, .tshare { float:left; display:block;background-repeat:no-repeat; 
        background-position:left top; } 
.fshare { background-image:url(../images/fshare.png);} 
.tshare { background-image:url(../images/tshare.png); } 
.thumbPan{ position:relative;} 
.gallThumb{ width:100%; max-width:302px; height:auto;} 

я попытался установить .share_button как блок, но не работал.

Answer 1

Не уверен, но попробуйте привязать тег вокруг img tag insted div, как это.

<div class="thumbPan"> <a href="#"> <img src="#" class="gallThumb"/> </a> <span class="gallType video"></span> </div> 

Также у вас нет закрытого тега img, который я знаю, что это не проблема, но хорошо закрыть его.

Тем не менее, если он не работает, то попробуйте

z-index:99; 
z-index:98; 

в маленьких изображений и

z-index:1; 

В главном изображении.