主页 / 问题 / 1035873
Accepted
Елизавета Чепцова
Asked:2020-10-18 06:33:02 +0000 UTC2020-10-18 06:33:02 +0000 UTC

告诉我如何修复代码，以便所有 h1 悬停时颜色都会发生变化？

  • 772

请告诉我如何修复代码。现在，如果有一个 querySelector，那么脚本可以工作，但只有一个 h1，如果我们将其更改为 getElementsByTagName()，那么脚本将完全停止工作。

var h = document.querySelector('h1');
var p = h.getBoundingClientRect();
var c = document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  /*Adjust the position of the cursor*/
  c.style.left = e.clientX - 50 + 'px';
  c.style.top = e.clientY - 50 + 'px';
  /*Adjust the radial-gradient*/
  h.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h.style.setProperty('--y', (e.clientY - p.left) + 'px');
}
h1 {
  color: #000;
  display: inline-block;
  margin: 50px;
  text-align: center;
  position: relative;
}

h1:before {
  position: absolute;
  content: attr(data-text);
  color: #fff;
  background: #000;
  clip-path: circle(50px at var(--x, -100px) var(--y, -100px));
}

.cursor {
  position: fixed;
  background: #000;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  top: calc(calc(var(--y) * 1px) - 50px);
  left: calc(calc(var(--x) * 1px) - 50px);
  z-index: -2;
}
<h1 data-text="WORK1">WORK1</h1>
<h1 data-text="WORK2">WORK2</h1>
<h1 data-text="WORK">WORK</h1>




<span class="cursor"></span>

代码笔

javascript

1 个回答

  1. Best Answer

    我相信你可以想出一个更好的方法来做到这一点，但我只够了。

    好吧，这一切都取决于填充和大小，因为如果发生变化，您将需要手动更改所有内容。

    var cursor = document.querySelector('span');

document.body.addEventListener('mousemove', moveCursor);

function moveCursor({
  clientX,
  clientY
}) {
  cursor.style.left = `${clientX - 50}px`;
  cursor.style.top = `${clientY - 50}px`;

  setProperties(clientX, clientY);
}

function setProperties(clientX, clientY) {
  var elemBelow = document.elementFromPoint(clientX, clientY);

  if (elemBelow.tagName === 'H1') {
    var {
      left,
      top
    } = elemBelow.getBoundingClientRect();

    elemBelow.style.setProperty('--x', `${clientX - left - 50}px`);
    elemBelow.style.setProperty('--y', `${clientY - top - 50}px`);
    elemBelow.addEventListener('mouseleave', setDefaultProperties);
  }
}

function setDefaultProperties({
  target
}) {
  target.style.setProperty('--x', '-100px');
}
    body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  position: relative;
  padding: 50px;
  color: #000;
  text-align: center;
}

h1::before {
  content: attr(data-text);
  position: absolute;
  background: #000;
  color: #fff;
  clip-path: circle(50px at var(--x, -100px) var(--y, -100px));
}

span {
  position: fixed;
  top: calc(calc(var(--y) * 1px) - 50px);
  left: calc(calc(var(--x) * 1px) - 50px);
  width: 100px;
  height: 100px;
  background: #000;
  border-radius: 50%;
  z-index: -2;
}
    <h1 data-text="WORK1">WORK1</h1>
<h1 data-text="WORK2">WORK2</h1>
<h1 data-text="WORK3">WORK3</h1>
<span></span>

    • 3

相关问题