如何将悬停效果添加到滑动滑块箭头

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

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

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

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

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

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