主页 / 问题 / 1103383
Accepted
ref21
Asked:2020-03-31 21:10:43 +0000 UTC2020-03-31 21:10:43 +0000 UTC

如何动态确定光标在 DOM 树中所需元素的 50px 半径范围内？

  • 772

如何实现这一点以便随后操纵该元素

javascript

3 个回答

  1. 笔画宽度可以通过 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>

    • 8
  2. Best Answer

    一种外观与此类似的变体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;
}

    • 5

  3. 这是一个小代码示例。您可以在此处阅读有关元素坐标和鼠标的更多信息。

    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>

    • 2

相关问题