悬停在父元素上时更改Sass元素上的动画

Question

目标：我试图更改在悬停父元素时在数百个元素上运行的无限动画。

上下文：我生成了数百个粒子，以便围绕链接形成轨道。我在其中执行的代码如下：

<div className="wrap">{this.createBlackhole()}</div>

  createBlackhole() {
    let blackholeArr = [];
    for (let i = 0; i < this.state.satNum; i++) {
      blackholeArr.push(<div className="c"></div>);
    }
    let blackhole = blackholeArr.map(sat => sat);
    return blackhole;
  }

我的CSS现在正在运行一个动画，该动画会导致所有粒子旋转。我想做的就是将鼠标悬停在包含的链接上时更改该动画。

我的CSS如下：

// CSS FOR BLACKHOLE ORBIT EFFECT -- I should spend a lot more time here to reduce load and improve effects
// best in chrome
$total: 800; // total sattellites
$orb-size: 170px;
$particle-size: 1.5px;
$time: 6s;
$base-hue: 10; // change for diff colors (180 is nice)

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: rotate $time infinite linear; // rotate orb
}

@keyframes rotate {
  100% {
    transform: rotateY(0deg) rotateX(00deg) rotateZ(360deg);
  }
}

.c {
  position: absolute;
  width: $particle-size;
  height: $particle-size;
  border-radius: 50%;
  opacity: 0;
  // background: silver;
}

@for $i from 1 through $total {
  $z: (random(360) * 1deg); // random angle to rotateZ
  $y: (random(40) * 1deg); // random to rotateX
  $hue: ((40 / $total * $i) + $base-hue); // set hue

  .c:nth-child(#{$i}) {
    // grab the nth particle
    animation: orbit#{$i} $time infinite;
    animation-delay: ($i * 0.005s);
    background-color: hsla($hue, 0%, 75%, 1);
  }

  @keyframes orbit#{$i} {
    1% {
      opacity: 1; // fade in
    }
    0.1% {
      transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // form orb
    }
    100% {
      transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // hold orb state 30-80
      opacity: 1; // hold opacity 20-80
    }
  }
}

我尝试嵌入以下内容，但没有用：

 .wrap:hover .c:nth-child(#{$i}) {
    animation: hoverorbit#{$i} $time/6 infinite;
  }
  @keyframes hoverorbit#{$i} {
    100% {
      transform: translateX($orb-size) rotateZ($z); // hold orb state 30-80
      opacity: 1; // hold opacity 20-80
    }
  }