我正在使用Fancybox plugin对于图像库,我想仅当用户将鼠标悬停在图像上时显示图像标题。我不知道要修改代码的哪一部分才能完成此任务。
我尝试通过向以下内容添加 :hover
状态来编辑 CSS:
.fancybox-title-over-wrap {
}
我什至尝试过在这里使用 CSS 可见性设置:
.fancybox-opened .fancybox-title {
}
但是,我没有运气。
我必须更改实际 JS 文件中的某些内容吗?任何帮助将不胜感激!
最佳答案
你不需要搞乱原来的js或css文件。您只需创建自己的自定义脚本并应用一些 fancybox API 选项和方法即可实现此目的。
例如,有这个 html
<a class="fancyLink" href="images/01.jpg" title="lorem ipsum">open image</a>
您需要一个自定义脚本来触发 fancybox,例如:
<script type="text/javascript">
$(document).ready(function() {
$(".fancyLink").fancybox();
}); // ready
</script>
现在,在上面的脚本中,尝试以下选项来实现您想要的 title
效果:
<script type="text/javascript">
$(document).ready(function() {
$(".fancyLink").fancybox({
helpers: {
title : {
type : 'over'
}
},
afterShow : function() {
$(".fancybox-title").hide();
$(".fancybox-wrap").hover(function() {
$(".fancybox-title").show();
}, function() {
$(".fancybox-title").hide();
});
}
});
}); // ready
</script>
您甚至可以添加一些漂亮的动画来显示标题
,例如
<script type="text/javascript">
$(document).ready(function() {
$(".fancyLink").fancybox({
helpers: {
title : {
type : 'over'
}
},
afterShow : function() {
$(".fancybox-title").hide();
$(".fancybox-wrap").hover(function() {
$(".fancybox-title").stop(true,true).slideDown(200);
}, function() {
$(".fancybox-title").stop(true,true).slideUp(200);
});
}
});
}); // ready
</script>
注意:这是 fancybox v2.x
关于jquery - 如何仅在图像悬停时显示 fancybox 标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9123886/