Question

我正在使用此问题的提示Overlay thumbnail with remove image button?来获取覆盖悬停删除图标，以便在我的页面上的缩略图上显示。

但是我也在使用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，它可以工作，如果我将其删除，则悬停图标可以正常工作。没有想法让他们都工作。任何帮助都会很棒。

Answer 1

你能试试吗，

.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保留为元素的类名。

Answer 2

...因为他们都需要<a>元素

实际上，您可以使用特殊的fancybox属性<a>将fancybox绑定到data-fancybox-*以外的任何html元素，因此请删除fancybox标记中的类<a>，将其添加到其父<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

获取fancybox和悬停删除图标以在同一图像上工作

2 个答案: