jquery - 让 fancybox 和 hover remove 图标在同一张图片上工作

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

...Because they both need the <a> element

实际上，您可以将 fancybox 绑定(bind)到除 <a> 之外的任何 html 元素。使用特殊的 fancybox 属性 data-fancybox-*所以摆脱类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