I want to achieve this cursor interaction

.cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translate3d(0, 0, 0);
}

#main {
  position: absolute;
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 999;
  opacity: 0.1;
}

#follower {
  position: absolute;
  background-color: lightgray;
  opacity: 0.5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: -20px;
  margin-left: -20px;
  z-index: 998;
}

a:hover .cursor #main {
  background-color: red;
}

<div class="App">
  <div class="cursor"><span id="main" style="left: 885px; top: 199px; display: none;"></span><span id="follower" style="left: 885px; top: 199px; display: none;"></span></div>
  <header>
    <div class="content">
      <nav>
        <div class="logo"><img src="/static/media/logo.29eeb746.svg" alt=""></div>
        <ul>
          <li><a href="#more">Know More</a></li>
          <span class="separator"></span>
          <li><a href="mailto:[email protected]">[email protected]</a></li>
        </ul>
      </nav>
      <div class="welcome">
        <p class="hello">Hello...</p>
        <p>I'm Abdelhamied <br> Mostafa</p>
      </div>
      <div class="foot">
        <p class="job">Full stack web developer</p>
        <p class="status">Self employed</p>
      </div>
    </div>
    <div class="full-pic"><img src="/static/media/side-pic.cdb78a3a.png" alt=""></div>
  </header>
</div>