@Amarok-w

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


Есть код, при наведении на элемент, у него внутри появляется круг, но если на него навести то пропадает. Как сделать так чтобы при наведении на круг он всё равно оставался?
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ответы на вопрос 1
@xareyli
люблю JavaScript
Как-то так
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();
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы