当设置为显示为图库时，fancybox中的上一个和下一个按钮会干扰vimeo视频的播放按钮 [英] The previous and next button in fancybox are interfering with the play button of a vimeo video when it is set to display as gallery

问题描述

我已经尝试调整fancybox样式表，但似乎无法移动上一个和下一个按钮的悬停区域，以免干扰vimeo视频的播放按钮.我不知道通过修改javascript文件是否可以解决问题，但我确实不知道这样做.这是fancybox样式表的CSS代码:

I have already tried tweaking the fancybox stylesheet but can't seem to move the hover area of the previous and next button so that it does not interfere with the play button of a vimeo video. I don't know if the problem can be solved by modifying the javascript file but I really don't have the knowledge to do so. Here is the css code of the fancybox stylesheet:

#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时如何修改上一个和下一个按钮的悬停区域，我将不胜感激.

I would appreciate if someone could help me figure out how to modify the hover areas for the previous and next buttons when using fancybox.

推荐答案

您也可以像我刚才那样将包含的div缩短，因此prev/next箭头悬停区域恰好位于Vimeo控件上方

You could also make the containing divs shorter as I have just done, so the prev/next arrow hover areas finish just above the Vimeo controls

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

这篇关于当设置为显示为图库时，fancybox中的上一个和下一个按钮会干扰vimeo视频的播放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！