Q:

hover on nav arrow not working

i have placed two navigation arrows on my automatic image slider and set a certain opacity, but when i hover the box shadow and the color does not change, in fact nothing happens, my hover css doesn't even activate. 

* {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}
.slide-container {
  height: 90%;
  width: 100%;
  overflow: hidden;
}
.slide-main {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
  overflow: hidden;
  animation: 30s slide infinite;
}
.slide {
  height: 100%;
  width: 20%;
  float: left;
}
@keyframes slide {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  90% {
    left: -300%;
  }
  95% {
    left: -400%;
  }
  100% {
    left: 0%;
  }
}
.arrow {} .arrow-left {
  position: relative;
  padding: 20px;
  top: -275px;
  left: -70px;
  cursor: pointer;
}
.arrow-left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 100px;
  height: 100%;
  width: 50%;
  background: #ffffff;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
  border-radius: 15px 15px 0px 0px;
  opacity: .4;
}
.arrow-left:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 100px;
  right: 60%;
  height: 100%;
  width: 50%;
  background: #ffffff;
  -webkit-transform: skew(-130deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
  border-radius: 0px 0px 15px 15px;
  opacity: .4;
}
​ .arrow-right {
  padding: 20px;
}
.arrow-right:before {
  content: '';
  position: absolute;
  top: 42%;
  left: 95%;
  height: 9%;
  width: 2%;
  background: #ffffff;
  cursor: pointer;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
  border-radius: 15px 15px 0px 0px;
}
.arrow-right:after {
  content: '';
  position: absolute;
  top: 51%;
  left: 95%;
  height: 9%;
  width: 2%;
  background: #ffffff;
  cursor: pointer;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
  border-radius: 0px 0px 15px 15px;
}
​ .arrow-left:hover {
  box-shadow: 10px 10px 5px #ffffff;
  opacity: 10;
  background: #ffffff;
}
<! --start-->
<div class="slide-container">
  <div class="slide-main">
    <img src="images/prop3.jpg" alt="" class="slide" />
    <img src="images/cover.jpg" alt="" class="slide" />
    <img src="images/cover2.jpg" alt="" class="slide" />
    <img src="images/drinkss.jpg" alt="" class="slide" />
    <img src="images/collection.jpg" alt="" class="slide" />
  </div>
</div>
<! --end-->


<div class="heacontai">
  <a class="arrow arrow-left" role="button"></a>

  <a class="arrow arrow-right" role="button"></a>
</div>

A:

You can use the following code to make hover work
.arrow-left:hover:before,.arrow-left:hover:after
{
   opacity: 10;
   box-shadow: 10px 10px 5px #ffffff;
   background: #ffffff;
}

Instead of
.arrow-left:hover {
    opacity: 10;
    box-shadow: 10px 10px 5px #ffffff;
    background: #ffffff;
}

Also check and update your box shadow code

