获取花哨框并悬停删除图标以处理同一图像

Question

我正在使用有关此问题的提示 使用删除图像按钮叠加缩略图？ 以获得叠加悬停删除图标以显示在我页面上的缩略图上。

但是我也在使用花式盒子，我似乎无法同时让两者工作。因为它们都需要<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，它会起作用，如果我删除它，悬停图标就会起作用。没有想法让他们俩都工作。任何帮助都会很棒。

Answer 1

。因为它们都需要<a>元素

实际上，您可以使用特殊的 fancybox 属性将 fancybox 绑定到除<a>以外的任何 html 元素data-fancybox-*因此请删除 <a> 标签中的类fancybox并将其添加到其父<div class="image-thumb fancybox"...

然后设置href、title和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

Answer 2

你能试试吗，

.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作为您是一个元素的类名。