将导航箭头悬停在不工作状态

Question

我在自动图像滑块上放置了两个导航箭头并设置了一定的不透明度，但是当我悬停盒子阴影并且颜色没有改变时，事实上没有任何反应，我的悬停css甚至没有激活。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<!--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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用以下代码使hover正常工作

.arrow-left:hover:before,.arrow-left:hover:after
{
   opacity: 10;
   box-shadow: 10px 10px 5px #ffffff;
   background: #ffffff;
}

而不是

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

同时检查并更新您的盒子阴影代码

Answer 2

你需要像这样编写Hover css

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