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实现这一点。在我的情况下，我使用FlexSlider for Drupal所以我不能保证你会有相同的CSS选择器，但我希望这段代码可以提供一个大致的想法：）

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

祝你好运！

P.S。我忘了提到你应该在你的CSS中设置你的标签选择器来显示：none;默认情况下。

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

2 个答案: