Cacher is the code snippet organizer for pro developers

<div class="box">Box</div>
<div class="box2">Box2</div>
<div class="box3">Box3</div>

$(function() {
  const body = document.body;
  // マウスストーカーの作成と追従
  const stalker = document.createElement("div");
  stalker.id = "stalker";
  body.appendChild(stalker);
  body.addEventListener(
    "mousemove",
    function(e) {
      stalker.style.left = e.clientX + "px";
      stalker.style.top = e.clientY + "px";
    },
    false
  );

  // ターゲットのオブジェクトの作成
  $(".box").one("mouseenter", function(e) {
    const item = document.createElement("div");
    item.classList.add("item");
    body.appendChild(item);
    return;
  });

  $(".box2").one("mouseenter", function(e) {
    const item2 = document.createElement("div");
    item2.classList.add("item2");
    body.appendChild(item2);
    return;
  });

  $(".box3").one("mouseenter", function(e) {
    const item3 = document.createElement("div");
    item3.classList.add("item3");
    body.appendChild(item3);
    return;
  });

  // ヒットしたらついてくるオブジェクトを生成、位置は目分量
  body.addEventListener(
    "mousemove",
    function(e) {
      const item = document.querySelector(".item");
      item.style.position = "fixed";
      item.style.left = -20 + e.clientX + "px";
      item.style.top = 60 + e.clientY + "px";
    },
    false
  );
  body.addEventListener(
    "mousemove",
    function(e) {
      const item2 = document.querySelector(".item2");
      item2.style.position = "fixed";
      item2.style.left = -80 + e.clientX + "px";
      item2.style.top = -20 + e.clientY + "px";
    },
    false
  );
  body.addEventListener(
    "mousemove",
    function(e) {
      const item3 = document.querySelector(".item3");
      item3.style.position = "fixed";
      item3.style.left = -60 + e.clientX + "px";
      item3.style.top = -80 + e.clientY + "px";
    },
    false
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

body {
  height: 100vh;
  background: #000;
}

.box,
.box2,
.box3 {
  position: fixed;
  left: 30%;
  top: 30%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: #fff;
  background-color: darkblue;
  height: 90px;
  width: 90px;
  text-align: center;
  line-height: 90px;
}
.box2 {
  left: calc(40% + 100px);
  top: calc(60% - 100px);
}
.box3 {
  left: calc(50% + 200px);
  top: calc(40% - 200px);
}

#stalker {
  position: fixed;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  transition: 0.1s;
  opacity: 0.4;
  // pointer-events: none;
}

.item,
.item2,
.item3 {
  // position: fixed;
  background-color: orange;
  width: 40px;
  height: 40px;
  float: left;
  margin: 0 3px 3px 0;
  left: 0;
  top: 0;
  transition: 0.1s;
}