如何让 Fancybox 下一个和上一个按钮保持可见答案

【问题标题】：How to let Fancybox Next and Previous button stay visible如何让 Fancybox 下一个和上一个按钮保持可见
【发布时间】：2017-10-05 15:41:22
【问题描述】：

我正在使用 fancybox 来显示一些图像。当前，当用户悬停图像时，将显示下一个或上一个按钮。但是，有些用户实际上并没有意识到这一点，并在查看第一张图片后关闭了fancybox。

所以，我希望让按钮始终可见。但是，我不知道该怎么做。我试图改变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: block; // Initially it was "none"
   }

但它并不能正常工作。

知道怎么做吗？

感谢任何帮助...谢谢...

【问题讨论】：

标签： jquery css hover fancybox

【解决方案1】：

您需要在页面上添加 css（在初始 css 加载后）-

例如，将其添加到带有您的 fancybox 的页面，或者在您的 fancybox css 样式表的头部之后。

<style type="text/css">

#fancybox-left-ico {
left: 20px;
}

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

</style>

就是这样。

【讨论】：

【解决方案2】：

在你的 fancybox css 文件中，找到这个类

.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
visibility:hidden;
z-index: 8040;
    }

只需删除“可见性”属性，按钮就会一直可见。通过这样做，您不必将样式标签添加到您的 html :)

【讨论】：

【解决方案3】：

内联 CSS 声明：

.fancybox-nav span {
  visibility: visible !important;
}

【讨论】：