如何添加懸停效果，光滑的滑塊箭頭

Question

$('.hero-slider').slick({ 
 
     slidesToShow: 1, 
 
     slidesToScroll: 1, 
 
     arrows: true, 
 
     dots:false, 
 
     infinite: true 
 
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<section class="info-banner"> 
 
     <div class="hero-slider"> 
 
     <div class="info-slider-content" style="background-image: url(images/);"> 
 
      <div class="banner-content info-content"> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever </p>   
 
      </div> 
 
     </div> 
 
     <div class="info-slider-content" style="background-image: url(images/);"> 
 
      <div class="banner-content info-content"> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever </p> 
 
      </div> 
 
     </div> 
 
     <div class="info-slider-content" style="background-image: url(images/);"> 
 
      <div class="banner-content info-content"> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </section>

我想懸停效果添加到我的光滑滑塊箭頭狀this。但是這裏所遵循的程序完全不同於滑塊箭頭，我發現定製它非常困難。我在任何形式加入一個和下一個箭頭狀

幫助將是巨大的！

Answer 1

跟蹤代碼：

nav a { 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t margin: 15px 25px; 
 
\t outline: none; 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 1px; 
 
\t font-weight: 400; 
 
\t text-shadow: 0 0 1px rgba(255,255,255,0.3); 
 
\t font-size: 1.35em; 
 
} 
 
.cl-effect-19 a { 
 
\t line-height: 2em; 
 
\t margin: 15px; 
 
\t -webkit-perspective: 800px; 
 
\t -moz-perspective: 800px; 
 
\t perspective: 800px; 
 
\t width: 200px; 
 
} 
 

 
.cl-effect-19 a span { 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t width: 100%; 
 
\t padding: 0 14px; 
 
\t background: #e35041; 
 
\t -webkit-transition: -webkit-transform 0.4s, background 0.4s; 
 
\t -moz-transition: -moz-transform 0.4s, background 0.4s; 
 
\t transition: transform 0.4s, background 0.4s; 
 
\t -webkit-transform-style: preserve-3d; 
 
\t -moz-transform-style: preserve-3d; 
 
\t transform-style: preserve-3d; 
 
\t -webkit-transform-origin: 50% 50% -100px; 
 
\t -moz-transform-origin: 50% 50% -100px; 
 
\t transform-origin: 50% 50% -100px; 
 
} 
 

 
.csstransforms3d .cl-effect-19 a span::before { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 100%; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: #b53a2d; 
 
\t content: attr(data-hover); 
 
\t -webkit-transition: background 0.4s; 
 
\t -moz-transition: background 0.4s; 
 
\t transition: background 0.4s; 
 
\t -webkit-transform: rotateY(90deg); 
 
\t -moz-transform: rotateY(90deg); 
 
\t transform: rotateY(90deg); 
 
\t -webkit-transform-origin: 0 50%; 
 
\t -moz-transform-origin: 0 50%; 
 
\t transform-origin: 0 50%; 
 
\t pointer-events: none; 
 
} 
 

 
.cl-effect-19 a:hover span, 
 
.cl-effect-19 a:focus span { 
 
\t background: #b53a2d; 
 
\t -webkit-transform: rotateY(-90deg); 
 
\t -moz-transform: rotateY(-90deg); 
 
\t transform: rotateY(-90deg); 
 
} 
 

 
.csstransforms3d .cl-effect-19 a:hover span::before, 
 
.csstransforms3d .cl-effect-19 a:focus span::before { 
 
\t background: #ef5e50; \t 
 
}

<script src="https://tympanus.net/Development/CreativeLinkEffects/js/modernizr.custom.js"></script> 
 
<section class="color-5"> 
 
\t \t \t \t <nav class="cl-effect-19" id="cl-effect-19"> 
 
\t \t \t \t \t <a href="#cl-effect-19"><span data-hover="Ratatouille">Ratatouille</span></a> 
 
\t \t \t \t </nav> 
 
\t \t \t </section>