在圖像上的錨鏈接

有一個圖像上有兩個錨鏈接。點擊圖像上的任意位置將打開覆蓋圖以顯示完整尺寸的圖像。點擊按鈕將打開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;}的位置。 –

在圖像上的錨鏈接

回答

相關問題