在图像上的锚链接

有一个图像上有两个锚链接。点击图像上的任意位置将打开覆盖图以显示完整尺寸的图像。点击按钮将打开Facebook/Twitter共享对话框。在图像上的锚链接

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

enter image description here

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为块，但没有工作。

来源

2015-04-14 Qwerty

你可以做一个小提琴或添加SO片段？看起来像是一个Z指数问题。但除非我玩弄它，否则无法分辨。 – dowomenfart

你如何打开覆盖？ – dfsq

嗯......点击'li'时可能会打开叠加层？ –

不确定，但尝试在img标签周围锚标签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;

在主图像。

来源

2015-04-14 12:11:45

试过这些......也是一样的。 – Qwerty

尝试更改图标和分享按钮的位置。 –

交换我的意思.sharebuttons {position：relative;}和.thumbpan {position：absolute;}的位置。 –

在图像上的锚链接

回答

相关问题