JQuery ползунок стрелки

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

2 ответа

  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;
    }
    
  2. Проверьте div, которые держат стрелку и получить класс, перейдите к таблице стилей.css и стиль этот класс с opacity0 и transition: all 1s ease(или любой функцией синхронизации). затем сделайте его видимым при вводе мышью, добавив :hoverпсевдо в класс и непрозрачность 1.

    результат будет таким :

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

    Или вы можете использовать JQ fadeToggleна mouseover mouseoutмероприятиях.