Как сделать так, чтобы div был там же где и курсор?

Question

[Anonymous]

Есть блок с классом "block". Если на него навести то появится блок с классом "block2".
Как сделать так, чтобы при наведении на "block" блок "block2" появлялся в том же месте что и курсор и следовал бы за ним?

<div class="block">
  <div class="block2">content</div>
</div>

.block2 {
     display: none;
     background-color: black;
     width: 100px;
     height: 50px;
     position: absolute;
}

.block {
     background-color: red;
     width: 1000px;
     height: 1000px;
}

.block:hover .block2 {
     display: block;
}

Answer 1

[0xD34F]

document.querySelector('.block').addEventListener('mousemove', function(e) {
  Object.assign(document.querySelector('.block2').style, {
    left: `${e.layerX}px`,
    top: `${e.layerY}px`,
  });
});