How to change text color when custom cursor is on hover

Question

When red cursor is hover on Works text, i want to change the Works text color black to blue and text will be zoom In on that red cursor area. anyone suggest me how to do this in 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">

yeah @TemaniAfif .. but that one is inverting the text color but i want to text color blue — Killerfish karthik, May 28 '20 at 19:28
if you check the code you will see that I am explicitely specifying each color .. simply change what you want to blue — Temani Afif, May 28 '20 at 19:29
https://stackoverflow.com/questions/55092674/custom-cursor-that-invert-colors — epascarello, May 28 '20 at 19:41
Duplicate of [Invert text color on mouse hover](https://stackoverflow.com/questions/49793312/invert-text-color-on-mouse-hover) — MrUpsidown, May 28 '20 at 22:18

score -1 · Answer 1 · answered May 28 '20 at 19:27

You should add pointer-events: none; to the cursor, so it doesn't interefer with the element below. And then add Hover or whatever pseudoclass you need to colorize it.

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">

score -1 · Answer 2 · answered May 28 '20 at 20:41

Consider the following code example.

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>

It was not clear to me what you mean by "text will be zoom In on that red cursor area." I suspect you can transform the text maybe? At least this way you can trigger the zoom action you want.

This uses basic collision detection to determine if the mouse isOver() a specific element.

How to change text color when custom cursor is on hover

2 Answers2