使用特殊光标更改悬停时的文本

Question

请指导我如何更改悬停时的文本，类似于 monopo 网站。我不需要背景。只需简单的圆形效果（如彩色背景）和文本更改即可。此外，如果可能的话，我希望该效果仅在名为“about”的 div 中激活。网站链接： 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>