Как динамически определять что курсор находится в радиусе 50px от нужного элемента DOM-дерева?

Question

Как можно такое реализовать, что бы потом проводить манипуляции с этим элементом

Answer 1

Вот небольшой пример кода. Подробнее про координаты элементов и мыши можно почитать тут.

let target = document.getElementById('ta');

window.addEventListener('mousemove', (e) => {
  if(e.clientX <= target.getBoundingClientRect().x + target.getBoundingClientRect().width + 50
  && e.clientY <= target.getBoundingClientRect().y + target.getBoundingClientRect().height + 50) {
    target.style.backgroundColor = 'red';
  } else {
    target.style.backgroundColor = 'blue';
  }
});

#ta {
  width: 50px;
  height: 50px;
  background-color: blue;
}

<div id="ta"></div>

Answer 2

ширину обводки можно через CSS контролировать

window.addEventListener('mousemove', function(e) {
  if (e.target.closest('[data-hover]')) {
    console.log('triger');
  }
});

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.block {
  width: 50px;
  height: 50px;
  background-color: black;
}

.block:hover {
  background-color: red;
}

[data-hover] {
  position: relative;
}

[data-hover]::before {
  content: '';
  width: 150px;
  height: 150px;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="block" data-hover></div>
</div>

Answer 3

Вариант, внешне похожий на этот https://ru.stackoverflow.com/a/1103404/188366, но углы все же обрабатываются иначе...

let html = '';
for (var i = 0; i < 30; i++) {
  let x = 25 + Math.random()*(innerWidth - 100);
  let y = 25 + Math.random()*(innerHeight - 100);
  html += `<div class="elem" style="transform:translate(${x}px,${y}px)"></div>`
}
document.body.innerHTML += html;

let elements = document.querySelectorAll('.elem')
addEventListener('mousemove', e => elements.forEach(el => checkElement(e, el)));

function checkElement(p, el) {
  let rect = el.getBoundingClientRect();
  let dx = Math.max(rect.x - p.x, 0, p.x - rect.x - rect.width);
  let dy = Math.max(rect.y - p.y, 0, p.y - rect.y - rect.height);
  el.classList.toggle('hover', Math.sqrt(dx*dx + dy*dy) < 50);
}

.elem {
  position: absolute;
  background: wheat;
  width: 48px;
  height: 48px;
  border: 1px solid transparent;
  opacity: 0.5;
}

.hover {
  border: 1px solid red;
}

БЛОГ НА HUSL

Как динамически определять что курсор находится в радиусе 50px от нужного элемента DOM-дерева?

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