该方案是，在正常模式下（悬停前），文本的颜色应该是渐变的形式。当鼠标放在任何字母上时，相同字母的范围将以30 px * 30 px的圆形形式创建。在悬停模式和非悬停模式下，我都必须使用渐变。
当鼠标悬停在每个字母上时，我想创建一个线性梯度（180 deg，rgba（255，33，44，0.5）0%，rgba（25，50，25，0.3）100%）的圆形悬停。考虑到填充与颜色为#f7f8fa的圆圈有关，但我希望它是透明的，以便在悬停的情况下，我只能使用其圆形模式。不是从颜色。但如果填写：透明;是的，老鼠不见了。另一个问题是，当我为正常模式（悬停前）使用渐变时，悬停时不会发生颜色变化。
现在我的问题是，我做的对吗？有没有其他的方法我可以使用梯度正常和悬停。

const bigBall = document.querySelector(".cursor__ball--big");

// Listeners
document.body.addEventListener("mousemove", onMouseMove);

// Move the cursor
function onMouseMove(e) {
  TweenMax.to(bigBall, 0.4, {
    x: e.pageX - 15,
    y: e.pageY - 15,
  });
}

// Hover an element
function onMouseHover() {
  TweenMax.to(bigBall, 0.3, {
    scale: 4,
  });
}

function onMouseHoverOut() {
  TweenMax.to(bigBall, 0.3, {
    scale: 1,
  });
}

body {
  height: 100vh;
  background: #010101;
  cursor: none;
  margin: 0;
  display: flex;
  font-family: monospace;
  align-items: center;
  justify-content: center;
}

body h1 {
  color: #fff;
}

body .cursor {
  pointer-events: none;
}

body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}

body .cursor__ball circle {
  fill: #f7f8fa;
}

body .myText {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

body .myText h1 {
  font-size: 80px;
}

body .myText h1 span {
  opacity: 0.8;
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(26, 33, 44, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  position: relative;
  color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="cursor">
  <div class="cursor__ball cursor__ball--big">
    <svg height="30" width="30">
          <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
        </svg>
  </div>
</div>

<div class="myText">
  <h1>
    <span class="color-letters">Get to know more about</span>
  </h1>
</div>