Question

我已经尝试过调整fancybox样式表，但似乎无法移动上一个和下一个按钮的悬停区域，这样它就不会干扰vimeo视频的播放按钮。我不知道问题是否可以通过修改javascript文件来解决，但我真的没有这方面的知识。这是fancybox样式表的css代码：

#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: none;
}

#fancybox-left {
left: 0px;
}

#fancybox-right {
right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: 0px;
cursor: pointer;
z-index: 1102;
display: block;
}

#fancybox-left-ico {
background-image: url('fancybox.png');
background-position: -40px -30px;
}

#fancybox-right-ico {
background-image: url('fancybox.png');
background-position: -40px -60px;
}

#fancybox-left:hover, #fancybox-right:hover {
visibility: visible; /* IE6 */
}

#fancybox-left:hover span {
left: 20px;

}

#fancybox-right:hover span {
left: auto;
right: 20px;
}

如果有人能帮我弄清楚在使用fancybox时如何修改上一个和下一个按钮的悬停区域，我将不胜感激。

Answer 1

你也可以像我刚才那样缩短包含的div，所以prev / next箭头悬停区域在Vimeo控件上方完成

#fancybox-left, #fancybox-right {
height: 86%;
}

Answer 2

我完成了这个：

#fancybox-left, #fancybox-right {
    width: 0%;
}

我把这个选择器放在我自己的样式表中，我在Fancybox的后面加载了它。

Answer 3

您实际上并不需要使用原始的fancybox css文件。

您可以做的是将导航箭头裁剪为其大小，以便下一个/上一个区域不会覆盖框两侧的整个区域。

在链接fancybox css文件后，添加此内联css声明：

<style type="text/css">
 #fancybox-left,
 #fancybox-right {
  width: 30px; height: 30px; top: 45%
 }

 #fancybox-left:hover span,
 #fancybox-left-ico{
  left: -10px;
 }

 #fancybox-right:hover span,
 #fancybox-right-ico {
  right: -10px;
  left: auto;
 }
</style>

这适用于fancybox v1.3.x

fancybox中的上一个和下一个按钮在设置为显示为库时会干扰vimeo视频的播放按钮

3 个答案: