自定义光标悬停时如何更改文本颜色[重复]

Question

当红色光标悬停在 Works 文本上时，我想将 Works 文本颜色从黑色更改为蓝色，文本将在该红色光标区域放大。任何人都建议我如何在 JavaScript 中做到这一点

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

 h1{
        text-align: center;
        font-size: 5rem;
        margin-top: 20%;
    }
    .cursor{
        position: absolute;
        background: red;
        width: 100px;
        height: 100px;
        border-radius: 50px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Works</h1>
<div class="cursor">

Answer 1

你应该添加指针事件：无；到光标，所以它不会与下面的元素发生冲突。 然后添加 Hover 或任何您需要为其着色的伪类。

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

h1{
        text-align: center;
        font-size: 5rem;
        margin-top: 20%;
    }
    
    h1:hover {
    color: red;
}
    .cursor{
        position: absolute;
        background: red;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        pointer-events: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Works</h1>
<div class="cursor">

Answer 2

考虑以下代码示例。

jQuery(function($) {
  var mouseX = 0,
    mouseY = 0,
    xp = 0,
    yp = 0;

  function isOver(e, obj) {
    var o = false,
      x = e.pageX,
      y = e.pageY;
    var pos = obj.offset();
    pos = {
      x1: pos.left,
      y1: pos.top,
      x2: pos.left + obj.width(),
      y2: pos.top + obj.height()
    };
    if ((x >= pos.x1 && x <= pos.x2) && (y >= pos.y1 && y <= pos.y2)) {
      o = true;
    }
    return o;
  }

  function moveCursor(evt) {
    mouseX = evt.pageX - 30;
    mouseY = evt.pageY - 30;
    xp += ((mouseX - xp) / 6);
    yp += ((mouseY - yp) / 6);
    $(".cursor").css({
      left: xp + 'px',
      top: yp + 'px'
    });
    if (isOver(evt, $("h1"))) {
      $("h1").addClass("blue zoom");
    } else {
      $("h1").removeClass("blue zoom");
    }
  }

  $(document).mousemove(moveCursor);
});

h1 {
  text-align: center;
  font-size: 5rem;
  margin-top: 20%;
  transform: scale(1);
}

.blue {
  color: blue;
}

.zoom {
  transform: scale(1.25);
}

.cursor {
  position: absolute;
  background: rgba(255, 0, 0, 0.45);
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Works</h1>
<div class="cursor"></div>

我不清楚您所说的“文本将在红色光标区域放大”是什么意思。我怀疑您可以转换文本吗？至少这样你可以触发你想要的缩放动作。

这使用基本的碰撞检测来确定鼠标isOver() 是否为特定元素。