我正在使用关于这个问题的提示 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; ?>">
</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,它就可以工作,如果我删除它,悬停图标就可以工作。出于让他们都工作的想法。任何帮助都会很棒。
最佳答案
...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> </a><strong><?php echo $file->description; ?></strong>
</div>
参见 JSFIDDLE
关于jquery - 让 fancybox 和 hover remove 图标在同一张图片上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20749253/