Edit in JSFiddle 

<body>
  <div id="mouse-stalker"></div>
  <h1>
    色が反転するマウスストーカー
  </h1>
  <div class="content">
    <div class="content_left">
      <p>White</p>
      <a href="###" class="link-item">Hover Me! ~Change MouseStalker~</a>
      <a href="###" class="no_stick_ link-item">Hover Me! ~No Change MouseStalker~</a>
    </div>
    <div class="content_right">
      <p>Black</p>
      <a href="###" class="link-item">Hover Me! ~Change MouseStalker~</a>
      <a href="###" class="no_stick_ link-item">Hover Me! ~No Change MouseStalker~</a>
    </div>
  </div>
</body>

#mouse-stalker {
  pointer-events: none;
  position: fixed;
  top: -10px; 
  left: -10px; 
  width: 20px; 
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transform: translate(0, 0);
  transition: transform 0.2s; 
  transition-timing-function: ease-out;
  z-index: 999;
  mix-blend-mode: difference;
  

  &.is_active {
    top: -40px; 
    left: -40px;
    width: 80px;
    height: 80px;
    transition: 0.2s;
  }
}

.content {
  display: flex;
  height: calc(100vh - 90px);
}

.content_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  background: #000;

  .link-item {
    display: block;
    padding: 20px;
    margin: 10px 0 0;
    color: #000;
    background: #fff;
    border-radius: 50px;
    text-decoration: none;

  }

  p {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }
}

.content_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  background: #fff;

  .link-item {
    display: block;
    padding: 20px;
    margin: 10px 0 0;
    color: #fff;
    background: #000;
    border-radius: 50px;
    text-decoration: none;
  }

  p {
    color: #000;
    font-size: 18px;
    font-weight: bold;
  }
}


/* 以下、関係のない記述です。 */
body {
  margin: 20px;
  text-align: center;
  background: #00a5a0;

  h1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
.content_right {
  .link-item {
    padding: 10px;
    margin: 5px 0 0;
    font-size: 10px;
  }

  p {
    font-size: 10px;
  }
}
.content_left {
  .link-item {
    padding: 10px;
    margin: 5px 0 0;
    font-size: 10px;
  }

  p {
    font-size: 10px;
  }
}

}

const stalker = document.getElementById('mouse-stalker');
let hovFlag = false;

document.addEventListener('mousemove', function (e) {
    stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});

const linkElem = document.querySelectorAll('a:not(.no_stick_)');
for (let i = 0; i < linkElem.length; i++) {
    linkElem[i].addEventListener('mouseover', function (e) {
        hovFlag = true;
        stalker.classList.add('is_active');
    });
    linkElem[i].addEventListener('mouseout', function (e) {
        hovFlag = false;
        stalker.classList.remove('is_active');
    });
}