Who can help implement the js function?

Question

css

I apologize for the title, but I don't even know how to call the topic otherwise.

I made such a simple script: https://jsfiddle.net/ordzb831/8/
The point is that the button smoothly changes color (in this case, there will be a transformation in the future, etc.).
The problem is that I figured out how to do this when the cursor is inside a block, but the color changes when we move the cursor from the extreme left side of the block .boxto the extreme right.

The task is to make the button change color when the cursor approaches it.

Answer 1

$(document).on('mousemove','.box',function(e) {
    var y = e.clientY/$(".box").height();
    var x = e.clientX/$(".box").width();
    var sum = (x + y) / 2;
    $(".krug").css({background: "rgba(43, 122, 245, "+sum+")"});
});