css - 图像上的 anchor 链接

Question

有一张图片上面有两个 anchor 链接。单击图像上的任意位置将打开一个叠加层以显示完整尺寸的图像。单击按钮将打开 facebook/twitter 共享对话框。

这里发生的事情是，单击按钮时，对话框和叠加层都会打开。单击 anchor 链接时如何停止显示叠加层。

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 设置为 block ，但没有成功。

Answer 1

不确定，但尝试像这样将 img 标签周围的 anchor 标签安装到 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;

在主图中。