1

現在Flexsliderを使用しており、現在画像の左右に表示されているナビゲーション矢印を非表示にできるようにしたいと考えていますが、ユーザーが画像にカーソルを合わせたときに表示されるようにしたいと考えています。古いサイト (muffin one) で取り上げられていたのを覚えていますが、woothemes では見つかりません。これを行うために情報を変更/修正/追加する方法について誰か考えがありますか? 前もって感謝します。

4

2 に答える 2

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

これにより、矢印が常に表示され、画像の外側 (画像の上ではなく、画像の左右) に表示されます。

于 2013-08-01T17:24:52.440 に答える
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();
                        });})

幸運を！

PSCSSのタグセレクターをdisplay：noneに設定する必要があることを忘れました。デフォルトでは。

于 2012-04-16T20:05:31.137 に答える