锚链接图像

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;

在主图像中。