我正在使用此问题上的提示叠加缩略图并删除图像按钮？ 获取叠加hover删除图标以显示在我的页面上的缩略图上。
但我也使用fancybox，我似乎无法同时工作。 因为它们都需要元素。
现在，这是我的代码。
<div class="image-thumb" style="display: inline-block; background-image: url('');" align="center"> <a class="fancybox" href="https://stackoverflow.com/questions/20749253/getting-fancybox-and-hover-remove-icon-to-work-on-the-same-image/filename; ?>" rel="galery1" title="description; ?>">
description; ?> 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; }
在元素中，如果我将类设置为fancybox，它可以工作，如果我将其删除，则hover图标可以工作。 没有想法让他们都工作。 任何帮助都会很棒。
实际上，您可以使用特殊的fancybox属性data-fancybox-*将fancybox绑定到除之外的任何html元素，因此请删除标记中的类fancybox并将其添加到其父
然后设置href ， title和group属性，如：
请参阅JSFIDDLE
你能试一下吗，
.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保留为元素的类名。