Jssor слайдер Переходы затухают и исчезают 2 стрелки

Question

У меня есть Jssor Slider, я хочу сделать 2 стрелки влево и вправо и отображать с fadein и fadeout - когда мышь над стрелкой 2 fadein - когда мышь 2 стрелки FADEOUT

любое предложение

благодаря

Answer 1

Учитывая есть стрелка навигатор кожи «кожа \ стрелка-01.source.html», пожалуйста, добавьте следующий код CSS в этой работе.

 #slider1_container .jssora01l, #slider1_container .jssora01r { 
      opacity: 0; 
     } 
     #slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r { 
      opacity: 1; 
     } 
     .jssora01l, .jssora01r { 
      -webkit-transition: opacity 0.25s linear; 
      -moz-transition: opacity 0.25s linear; 
      -o-transition: opacity 0.25s linear; 
      transition: opacity 0.25s linear; 
     } 

И, наконец, вы получите следующую стрелку навигатора кожи,

<!-- Arrow Navigator Skin Begin --> 
    <style> 
     /* jssor slider arrow navigator skin 01 css */ 
     /* 
     .jssora01l    (normal) 
     .jssora01r    (normal) 
     .jssora01l:hover  (normal mouseover) 
     .jssora01r:hover  (normal mouseover) 
     .jssora01ldn   (mousedown) 
     .jssora01rdn   (mousedown) 
     */ 
     .jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn 
     { 
      position: absolute; 
      cursor: pointer; 
      display: block; 
      background: url(../img/a01.png) no-repeat; 
      overflow:hidden; 
     } 
     .jssora01l { background-position: -8px -38px; } 
     .jssora01r { background-position: -68px -38px; } 
     .jssora01l:hover { background-position: -128px -38px; } 
     .jssora01r:hover { background-position: -188px -38px; } 
     .jssora01ldn { background-position: -8px -38px; } 
     .jssora01rdn { background-position: -68px -38px; } 

     #slider1_container .jssora01l, #slider1_container .jssora01r { 
      opacity: 0; 
     } 
     #slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r { 
      opacity: 1; 
     } 
     .jssora01l, .jssora01r { 
      -webkit-transition: opacity 0.25s linear; 
      -moz-transition: opacity 0.25s linear; 
      -o-transition: opacity 0.25s linear; 
      transition: opacity 0.25s linear; 
     } 
    </style> 
    <!-- Arrow Left --> 
    <span u="arrowleft" class="jssora01l" style="width: 45px; height: 45px; top: 123px; left: 8px;"> 
    </span> 
    <!-- Arrow Right --> 
    <span u="arrowright" class="jssora01r" style="width: 45px; height: 45px; top: 123px; right: 8px"> 
    </span> 
    <!-- Arrow Navigator Skin End -->