Как сделать замену содержимого элемента?

Question

[Amarok-w]

Есть код, при наведении на элемент, у него внутри появляется круг, но если на него навести то пропадает. Как сделать так чтобы при наведении на круг он всё равно оставался?

Comments

[RomanKudlatov]

У круга в css написать pointer-events: none;

Answer 1

[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();
}