獲取fancybox和懸停刪除圖標在同一圖像上工作

我正在使用關於此問題的提示Overlay thumbnail with remove image button?以獲取疊加懸停刪除圖標以顯示在我的頁面上的縮略圖。獲取fancybox和懸停刪除圖標在同一圖像上工作

但我也使用fancybox，我似乎無法同時工作。因爲他們都需要<a>元素。

現在，這是我的代碼。

<div class="image-thumb" style="display: inline-block; background-image: url('<?php echo base_url().$path.$thumb; ?>');" align="center"> 
<a class="fancybox" href="<?php echo base_url().$path.$file->filename; ?>" rel="galery1" title="<?php echo $file->description; ?>"> 
    &nbsp; 
</a><br> 
<?php echo $file->description; ?></strong> 
</div>

的CSS：

.image-thumb { 
position: relative; 
width: 150px; 
height: 150px; 
/* apply background-image url inline on the element since it is part of the content */ 
background: transparent url() no-repeat center center; 
} 

.image-thumb a { 
display: none; 
position: absolute; 
top: 2px; /* position in bottom right corner, assuming image is 16x16 */ 
left: 126px; 
width: 22px; 
height: 22px; 
background: transparent url('/path/to/remove-icon.gif') no-repeat 0 0; 
} 

.image-thumb:hover a { 
display: block; 
}

在<a>元素，如果我的班級設置的fancybox，它的工作原理，如果我刪除它，懸停圖標的作品。出於想法讓他們工作。任何幫助都會很棒。

來源

2013-12-23 Christian Dechery

你能後的CSS代碼？ –

...因爲他們都需要<a>元素

其實，你可以綁定的fancybox比使用特殊的fancybox <a>其他任何HTML元素的屬性data-fancybox-*因此擺脫了類fancybox的在您的<a>標記中，並將其添加到其父項<div class="image-thumb fancybox"...

然後設置href,像210個group屬性：

<div class="image-thumb fancybox" data-fancybox-href="<?php echo base_url().$path.$file->filename; ?>" data-fancybox-group="gallery1" data-fancybox-title="<?php echo $file->description; ?>" style="..."> 
    <a>&nbsp;</a><strong><?php echo $file->description; ?></strong> 
</div>

見JSFIDDLE

來源

2013-12-23 20:05:18 JFK

你可以試試，

.image-thumb a.fancybox { 
display: none; 
position: absolute; 
top: 2px; /* position in bottom right corner, assuming image is 16x16 */ 
left: 126px; 
width: 22px; 
height: 22px; 
background: transparent url('/path/to/remove-icon.gif') no-repeat 0 0; 
} 

.image-thumb:hover a.fancybox { 
display: block; 
}

，只是不斷的fancybox作爲類名稱爲您的一個元素。

來源

2013-12-23 18:41:02

我在想也許使用兩個懸停圖像。一個用於刪除，另一個用於觸發fancybox。但不知道如何做到這一點。我吮吸CSS。：/ –

你在你的頁面上放入了什麼樣的javascript讓fancybox工作？你可以發佈嗎？ –

沒有什麼特別的習慣，只是使用了最基本的fancybox使用方法，也就是將'fancybox'放在''這個元素上。 Fancybox只是讓它工作。 –

獲取fancybox和懸停刪除圖標在同一圖像上工作

回答

相關問題