フレックススライダ - ナビゲーション矢印ホバーまで表示

Question

フレックススライダーを現在使用していて、画像の左右に表示されているナビゲーション矢印を隠すことができますが、ユーザーが画像上を移動したときに表示されるようにしたいと考えています。私はそれが古いサイトで扱われていることを覚えています - マフィン1、しかし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であなたのタグセレクタを設定する必要があることを言及することを忘れていた：なし;デフォルトでは

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

これはあなたの矢になるだろうあなたはそれが箱の外に見えるようにしたい場合は、それがこのようなものにする必要があります。常に表示され、画像の外側（画像の上部ではなく画像の左右）に表示されます。