Flexslider - навигационная стрелка скрыть до наведения

Question

В настоящее время используется Flexslider, и он хотел бы иметь возможность скрывать навигационные стрелки, которые в настоящее время отображаются справа и слева от изображения, но затем отображать их, когда пользователь наводит курсор на изображение.Я помню, что он был адресован на старом сайте - маффин, но не могу найти его на woothemes.У кого-нибудь есть идеи о том, как изменить / изменить / добавить информацию, чтобы сделать это?Заранее спасибо.

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

Thisсделает ваши стрелки всегда видимыми и появятся за пределами изображения (справа и слева от изображения, а не сверху изображения).

Answer 2

Вы, вероятно, можете сделать это через jQuery. В моем случае я использую FlexSlider для Drupal, поэтому я не могу обещать, что у вас будут те же селекторы CSS, но я надеюсь, что этот код может дать общую идею:)

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

Удачи!

P.S. Я забыл упомянуть, что вы должны установить ваши селекторы тегов в CSS для отображения: нет; по умолчанию.