更改光标后圆圈下的文本颜色

问题描述

我需要更改鼠标光标后圆圈下文本的颜色。

我将圆圈编码为跟随光标，但我不知道如何更改圆圈下文本的颜色。 我想将颜色更改为标题的背景颜色。

我的代码：

$(document).ready(function() {

  var mouseX = 0,mouseY = 0,xp = 0,yp = 0;
      
  $("header").mousemove(function(e) {
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30;
    
    xp += ((mouseX - xp)/6);
    yp += ((mouseY - yp)/6);
      
    $(".circle").css({
      left: xp +'px',top: yp +'px'
    });
  });

});

header {
  background: #800000;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

h1,p { color: #ffffff; }

.circle {
  width: 100px;
    height: 100px;
  background: #ffffff;
  border-radius: 50%;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Eveniet illo,iure ipsa excepturi tempora nemo deleniti consequatur dolore dolorem qui.</p>
  <span class="circle"></span>
</header>

解决方法

在您的 .circle 类中使用 mix-blend-mode: difference;

$(document).ready(function() {

  var mouseX = 0,mouseY = 0,xp = 0,yp = 0;
      
  $("header").mousemove(function(e) {
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30;
    
    xp += ((mouseX - xp)/6);
    yp += ((mouseY - yp)/6);
      
    $(".circle").css({
      left: xp +'px',top: yp +'px'
    });
  });

});

header {
  background: #800000;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

h1,p { color: #ffffff; }

.circle {
  width: 100px;
    height: 100px;
  background: #ffffff;
  border-radius: 50%;
    position: absolute;
    mix-blend-mode: difference;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Eveniet illo,iure ipsa excepturi tempora nemo deleniti consequatur dolore dolorem qui.</p>
  <span class="circle"></span>
</header>