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

Question

目前使用Flexslider，并希望能够隐藏目前出现在图像右侧和左侧的导航箭头，但不会让用户在图像上悬停时显示导航箭头。我记得它在旧网站上被解决 - 松饼一个，但在woothemes上找不到它。 有没有人有想法如何更改/修改/添加信息做到这一点？ 在此先感谢。

Answer 1

你也许可以通过jQuery完成这个任务。在我来说，我使用Drupal的FlexSlider所以我不能保证，你将有相同的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;默认。

Answer 2

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

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