当我的自定义光标悬停在文本上时，如何使文本可见

Question

我有一个跟随光标的圆圈。我想知道是否可以添加一个效果，这样当圆圈悬停在文本上时，它只会将圆圈下方的文本变为黑色，这样即使白色圆圈位于其顶部，您也可以看到文本。

当我将鼠标悬停在文本上时，我尝试使用 CSS 将文本设为黑色，但它不起作用，因为单词太大，因此黑色圆圈外的文本与背景融为一体。

我只希望圆圈下方的文本变黑，其余部分保持白色。

document.addEventListener('DOMContentLoaded', () => {
  const interBubble = document.getElementById('circle');
  let curX = 0;
  let curY = 0;
  let tgX = 0;
  let tgY = 0;

  function move() {
    curX += (tgX - curX) / 10;
    curY += (tgY - curY) / 10;
    interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
    requestAnimationFrame(() => {
      move();
    });
  }

  window.addEventListener('mousemove', (e) => {
    tgX = e.clientX;
    tgY = e.clientY;

    if (e.target.tagName === 'P' ||
      e.target.tagName === 'A' ||
      e.target.tagName === 'BUTTON' ||
      e.target.parentNode.tagName === 'BUTTON') {
      interBubble.classList.add('big');
    } else {
      interBubble.classList.remove('big');
    }
  });

  move();
});

Body {
  background-color: black;
  overflow: hidden;
}

div {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

p {
  color: white;
  font-size: 30px;
}

p:hover {
  color: black;
}

:root {
  --trans-bounce: cubic-bezier(.4,2.2,.6,1.0);
  --trans-time: .4s;
}

.mouseFollowCircle {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  position: absolute;
  z-index: 1;
  top: -15px;
  left: -15px;
  box-shadow: 0 0 10px white;
  background-color: white;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition: width var(--trans-time) var(--trans-bounce), height var(--trans-time) var(--trans-bounce), top var(--trans-time) var(--trans-bounce), left var(--trans-time) var(--trans-bounce), background-color var(--trans-time) var(--trans-bounce);
}

.mouseFollowCircle.big {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  position: absolute;
  z-index: 1;
  top: -35px;
  left: -35px;
  box-shadow: 0 0 10px white;
  background-color: white;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition: width var(--trans-time) var(--trans-bounce), height var(--trans-time) var(--trans-bounce), top var(--trans-time) var(--trans-bounce), left var(--trans-time) var(--trans-bounce), background-color var(--trans-time) var(--trans-bounce);
}

<div><p>Hello World</p></div>
<section class="mouseFollowCircle" id="circle"></section>

Answer 1

mix-blend-mode: difference

会将白底白字变为黑色，黑底白字将变为白色。

但是，两个元素必须处于同一级别，因此在此代码段中删除了 z-index 和变换。 Transform 属性被 margin-top 和 -left 取代（感谢这个 CSS mix-blend-mode 可以与 Transform 配合使用吗？）

document.addEventListener('DOMContentLoaded', () => {
  const interBubble = document.getElementById('circle');
  let curX = 0;
  let curY = 0;
  let tgX = 0;
  let tgY = 0;

  function move() {
    curX += (tgX - curX) / 10;
    curY += (tgY - curY) / 10;
    //interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
    interBubble.style.marginTop = `${Math.round(curY)}px`;
    interBubble.style.marginLeft = `${Math.round(curX)}px`;
    requestAnimationFrame(() => {
      move();
    });
  }

  window.addEventListener('mousemove', (e) => {
    tgX = e.clientX;
    tgY = e.clientY;

    if (e.target.tagName === 'P' ||
      e.target.tagName === 'A' ||
      e.target.tagName === 'BUTTON' ||
      e.target.parentNode.tagName === 'BUTTON') {
      interBubble.classList.add('big');
    } else {
      interBubble.classList.remove('big');
    }
  });

  move();
});

body {
  background-color: black;
  overflow: hidden;
}

div {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  color: white;
  font-size: 30px;
}

:root {
  --trans-bounce: cubic-bezier(.4, 2.2, .6, 1.0);
  --trans-time: .4s;
}

.mouseFollowCircle {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  position: absolute;
  top: -15px;
  left: -15px;
  box-shadow: 0 0 10px white;
  background-color: white;
  pointer-events: none;
  /*backdrop-filter: blur(2px);*/
  transition: width var(--trans-time) var(--trans-bounce), height var(--trans-time) var(--trans-bounce), top var(--trans-time) var(--trans-bounce), left var(--trans-time) var(--trans-bounce), background-color var(--trans-time) var(--trans-bounce);
}

.mouseFollowCircle.big {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  position: absolute;
  top: -35px;
  left: -35px;
  box-shadow: 0 0 10px white;
  background-color: white;
  pointer-events: none;
  /*backdrop-filter: blur(2px);*/
  transition: width var(--trans-time) var(--trans-bounce), height var(--trans-time) var(--trans-bounce), top var(--trans-time) var(--trans-bounce), left var(--trans-time) var(--trans-bounce), background-color var(--trans-time) var(--trans-bounce);
  mix-blend-mode: difference;
}

<div>
  <p>Hello World</p>
</div>
<section class="mouseFollowCircle" id="circle"></section>

请注意，我注释掉了过滤器，因为我不确定您想要模糊的文本。