JQuery slider стрелки

Question

У меня есть сайт, на котором вы покупаете, и я хотел бы, чтобы стрелки слайдера исчезали, когда вы наводите на него курсор и исчезаете, когда уходит мышь. Прямо сейчас стрелки просто появляются. У меня есть js-файл shopify с ползунком, но я не уверен, где редактировать код. Любая помощь будет оценена!

Answer 1

Вы должны добавить стили для стрелок в свой файл css.

Пример - https://jsfiddle.net/jc0otowt/2/

Код:

/* FlexSlider Fade In/Out Arrows*/ 
div.flexslider .flex-direction-nav .flex-prev { 
    left: 10px; 
} 

div.flexslider:hover .flex-direction-nav .flex-prev { 
    left: 10px; 
} 

div.flexslider .flex-direction-nav .flex-next { 
    right: 10px; 
} 

div.flexslider:hover .flex-direction-nav .flex-next { 
    right: 10px; 
} 

Answer 2

Проверьте DIV, который удерживать стрелку и получить класс, перейдите к stylesheet.css и стиль этого класса с opacity 0 и transition: all 1s ease (или любого времени функция). затем сделать его видимым, когда мышь ввести путем добавления :hover псевдо к классу и непрозрачности 1.

результат будет выглядеть так:

.divClass { 
    opacity:0; 
    transition: all 1s ease; 
} 

.divClass:hover { 
    opacity:1; 
} 

Или вы можете использовать JQ fadeToggle на mouseovermouseout событий.