<div class="main_circle_icon"></div>
<div class="content_div"></div>

<div class="console"></div>

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main_circle_icon {
  z-index: 10100;
  position: fixed;
  width: 5px;
  height: 5px;
  background-color: black;
  border-radius: 50%;
}

.content_div {
  width: 100px;
  height: 50px;
  background-color: rgba(0, 0, 0, .4);
  z-index: 100;
}



.console {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; 
  border: 2px solid black;
}

let mainCircleIcon = document.querySelector('.main_circle_icon');
let moveX = 0;
let moveY = 0;
let x = 0;
let y = 0;
let interval = null;
let intervalStarted = false;
let contentDiv = document.querySelector('.content_div');
let outputDiv = document.querySelector('.console');
                                        
contentDiv.addEventListener('mouseenter', e => {
  outputDiv.textContent += ' | ENTER' 
})

contentDiv.addEventListener('mouseleave', e => {
  outputDiv.textContent += ' | LEAVE' 
})

document.addEventListener('mousemove', e => {
  x = e.clientX;
  y = e.clientY;
  mainCircleIcon.style.top = y  + 'px';
  mainCircleIcon.style.left = x  + 'px';
})

setInterval(() => {
  outputDiv.textContent = "";
}, 3000)