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

Question

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

const items = document.querySelector('.items');
let content;

items.addEventListener('mouseover', el => {
  el.target.style.justifyContent = 'center';
  el.target.style.alignItems = 'center';

  content = el.target.innerHTML;
  el.target.innerHTML =
    `
    <div class='circle'></div>
  `
})
items.addEventListener('mouseout', el => {
  el.target.style.justifyContent = 'start';
  el.target.style.alignItems = 'start';

  el.target.innerHTML = content;
})

body {
  display: flex;
}

.items {
  display: flex;
}

.case {
  display: flex;
  border: 2px solid red;
}

.item {
  height: 500px;
  width: 400px;
  background: #333;
  display: flex;
  border: 1px solid #222;
}

h3 {
  margin: 25px;
}

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #ccc;
}

<div class="items">

  <div class="item">
    <h3>Text</h3>
  </div>

  <div class="item">
    <h3>Text</h3>
  </div>

</div>

БЛОГ НА HUSL

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

Ответы (0 шт):