xareyli

const items = document.querySelector('.items');
let currentElem = null;

items.addEventListener('mouseover', (event) => {
  if (currentElem) {
    return;
  }
  
  let target = event.target.closest('.item')

  if (!target) {
    return;
  }

  onEnter(target)
  currentElem = target
})

items.addEventListener('mouseout', (event) => {
  if (!currentElem) {
    return;
  }
  
  let relatedTarget = event.relatedTarget;
  
  while (relatedTarget) {
    if (relatedTarget === currentElem) return;
    
    relatedTarget = relatedTarget.parentNode;
  }
  
  onLeave(currentElem);
  currentElem = null;
})

function onEnter(target) {
  target.insertAdjacentHTML('beforeend', '<div class="circle"></div>')
}

function onLeave(target) {
  target.querySelector('.circle')?.remove();
}