jquery – 使用FancyBox 2.0时,如何在悬停标题标签时隐藏工具提示？

更新[2016年3月4日]

这是一篇旧帖子,接受的答案对当时的版本有效.使用当前版本(v2.1.5)更简洁的解决方案而无需任何额外的HTML容器,回调的使用都不会在锚点中使用特殊的data-fancybox-title,如：

<a data-fancybox-title="This title doesn't show on hover" class="fancybox" href="path/img01.jpg">open image in fancybox</a>

然后使用简单的fancybox初始化,此效果不需要回调,如：

$(".fancybox").fancybox();

见JSFIDDLE

你甚至可以在属性中使用HTML标签,如：

<a rel="gallery" data-fancybox-title="This is <span style='color:#ff0000'>title</span> No. 1" class="fancybox" href="path/img01.jpg">open image</a>

见更新JSFIDDLE

原始答案：

一种优雅的方法是将fancybox使用的标题存储在其他地方,而不是标题属性…在隐藏的div中,例如恰好在锚之后：

<a class="fancybox" href="images/01.jpg" title="only show this on hover"><img src="images/01t.jpg"  /></a>
<div class="newTitle" style="display: none;"><p>hello,visite my site <a href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></p></div>

通过这种方式,您可能拥有(或根本没有)与fancybox标题不同的工具提示.此外,您忘记了添加或删除title属性值的额外javascript(您只会添加cpu负载).

这对于包含上述示例中的链接的长标题或复杂标题也很有用.

然后您的fancybox脚本应如下所示：

$(document).ready(function() {
 $(".fancybox").fancybox({
  afterLoad: function(){
   this.title = $(this.element).next('.newTitle').html();
  },helpers: {
   title : {
    type : 'inside'
   }
  }
 }); // fancybox
}); // ready

注意：唯一的条件是带有标题的div应该跟随每个锚点,否则.next()方法将失败.您可以自定义脚本以从代码中的其他位置获取标题,无论它是否在锚点之后,获取标题ID,例如：

this.title = $('#myCaption').html();

更新(2012年6月15日)：如果使用v2.0.6,则应使用beforeShow而不是afterLoad回调选项.