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

Flexslider - navigation arrow hide until hover

本文关键字：悬停 隐藏 导航 Flexslider-      更新时间：2023-09-26

当前使用Flexslider，希望能够隐藏当前出现在图像右侧和左侧的导航箭头，但不希望在用户悬停在图像上时显示。我记得它是在旧网站上写的——松饼一号，但在wootemes上找不到。有人知道如何更改/修改/添加信息吗？提前谢谢。

您可以修改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;}

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

您可能可以通过jQuery实现这一点。在我的例子中，我使用的是Drupal的FlexSlider，所以我不能保证你会有相同的CSS选择器，但我希望这段代码能提供一个大致的想法：）

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

祝你好运！

附言：我忘了提一下，你应该在CSS中设置一个标签选择器来显示：none；默认情况下。

相关文章：