マウスストーカーの丸い円がテキストに重なった時に、テキストの色を変えたいです。

前提・実現したいこと

マウスストーカーのデザインを作っております。
カーソルを黒い点にし、そこについてくる丸い円を作り、リンクの上に来ると丸い円が拡大するところまでは出来ているのですが、細かいことなのですがこの丸い円の色が青なのでテキスト(黒色)を通ると重なって見えにくい状態になってしまうため下記ホームページのように、テキストの上に重なった時は色を見えやすい色にしたい(こちらでは黒いテキストの上に青いマウスストーカーが来るとテキストが黄色に変化できています)のですが色を変えることができない状況です、、何卒ご教授頂けますでしょうか。よろしくお願い致します。

該当のソースコード

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
</head>
<body>

  <div class="cursor"></div>
  <div class="follower"></div>

<!--=============JS ===============-->
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/script2.js"></script>
</body>
</html>

css
body {
  position: relative;
  cursor: none;
}
.cursor,
.follower {
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  cursor: none;
}
.cursor {
  width: 8px;
  height: 8px;
  background-color: #1a1a1a;
  z-index: 1001;
}
.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color:#1B1464;
  transition: transform ease .1s;
  text-align: center;
  z-index: 1000;
mix-blend-mode:exclusion;
pointer-events: none;

}
.is-active {
	transform: scale(3);
}
.follower span{
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    transform: scale(0);
}

js
var
  cursor = $(".cursor"),
  follower = $(".follower"),
  cWidth = 8,
  fWidth = 40,
  delay = 10,
  mouseX = 0,
  mouseY = 0,
  posX = 0,
  posY = 0;

  TweenMax.to({}, .001, {
    repeat: -1,
    onRepeat: function() {
      posX += (mouseX - posX) / delay;
      posY += (mouseY - posY) / delay;

      TweenMax.set(follower, {
          css: {
            left: posX - (fWidth / 2),
            top: posY - (fWidth / 2)
          }
      });

      TweenMax.set(cursor, {
          css: {
            left: mouseX - (cWidth / 2),
            top: mouseY - (cWidth / 2)
          }
      });
    }
  });

  $(document).on("mousemove", function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
  });

  $("a").on({
    "mouseenter": function() {

      follower.addClass("is-active");
    },
    "mouseleave": function() {
      cursor.removeClass("is-active");
      follower.removeClass("is-active");
    }
  });