CSS动画第二个悬停

Question

我有一个很长的图像要进行动画处理（翻译） 找到了一些可以帮助我制作动画的代码，但不确定是否可以将其与悬停在另一个箭头所在的DIV上合并

有没有JS就可以做到吗？ 这是CODEPEN

到目前为止的代码：

.wrapper {
  overflow: hidden;
  position: relative;
}

.arrow-left {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(to right, blue, transparent);
  width: 200px;
}

.arrow-left:hover~.sliding-background {
  animation-direction: reverse;
}

.arrow-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to left, red, transparent);
  width: 200px;
}

.sliding-background {
  background: url("https://upload.wikimedia.org/wikipedia/commons/6/62/Element-haeufigkeit.svg");
  height: 500px;
  width: 3000px;
  animation: slide 8s linear;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1000px, 0, 0px);
  }
}

<div class="wrapper">
  <div class="sliding-background"></div>
  <div>
    <img class="arrow-left" src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_left_black_144x144.png" />
    <img class="arrow-right" src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_right_black_144x144.png" />
  </div>
</div>