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;} 

這將使你的箭始終可見並出現在圖像之外（圖像的左側和右側，而不是圖像頂部）。