Verwenden Sie einen speziellen Cursor, um den Text beim Schweben zu ändern

Question

Bitte zeigen Sie mir, wie ich den Text beim Hover ändern kann, ähnlich wie auf der Monopo-Website. Ich brauche keinen Hintergrund. Sie benötigen lediglich einen einfachen kreisförmigen Effekt (z. B. einen farbigen Hintergrund) und Textänderungen. Wenn möglich, möchte ich außerdem, dass der Effekt nur im Div mit dem Namen „about“ aktiv ist. Website-Link: https://monopo.london/

Answer 1

这是一个帮助您入门的简单示例。

“镜头”中的文本位于主要文本顶部的元素中。每次鼠标移动时，它都会在鼠标位置处被剪成一个圆圈。它的背景是白色的，所以看起来好像覆盖了下面的文本。

<style>
  .about {
    position: relative;
    --x: -0;
    --y: -0;
    font-size: 48px;
  }
  
  .overlay {
    position: absolute;
    background: white;
    top: 0;
    left: 0;
    z-index: 1;
    clip-path: circle(1em at var(--x) var(--y));
    color: red;
  }
</style>
<div class="about">
  <div class="underneath">This is some text <br>and some more</div>
  <div class="overlay">Different characters<br>and again more</div>
</div>
<script>
  const about = document.querySelector('.about');
  about.addEventListener('mousemove', function() {
    const x = event.clientX;
    const y = event.clientY;
    about.style.setProperty('--x', x + 'px');
    about.style.setProperty('--y', y + 'px');
  });
</script>