javascript - Flexslider - 导航箭头隐藏直到悬停

Question

当前使用 Flexslider 并希望能够隐藏当前出现在图像右侧和左侧但当用户将鼠标悬停在图像上时它们会出现的导航箭头。我记得它是在旧网站上解决的——松饼一号，但在 woothemes 上找不到。有没有人知道如何更改/修改/添加信息来做到这一点？提前致谢。

Answer 1

您可以修改css中的箭头。如果您希望箭头始终可见，您需要更改不透明度。它当前设置为 0，使其在悬停之前不可见（悬停不透明度设置为 1，完全可见）。所以你只想让它像这样可见：

.flex-direction-nav a {opacity: 1;}

如果您想更改箭头的位置，您只需更改边距即可。当前设置为-20px。如果你想让它出现在框外，你需要使它像这样：

.flex-direction-nav a {margin: -40px 0 0;}

如果你做了两个你的CSS看起来像这样：

.flex-direction-nav a {opacity: 1; margin: -40px 0 0;}

这将使您的箭头始终可见并出现在图像之外（在图像的右侧和左侧，而不是在图像的顶部）。

Answer 2

您可能可以通过 jQuery 完成此操作。在我的例子中，我在 Drupal 中使用 FlexSlider，所以我不能保证你会有相同的 CSS 选择器，但我希望这段代码可以提供一个总体思路：）

$(document).ready(function(){$("div.flexslider").hover(function() {
                            $("a.prev").show();
                            $("a.next").show();
                        },
                        function() {
                            $("a.prev").hide();
                            $("a.next").hide();
                        });})

祝你好运！

PS我忘了提到你应该在你的CSS中设置你的标签选择器来显示：无；默认。