Event for "mouse near element" in JavaScript?

I just cobbled together the code so it may be buggy, but I think something like this might do the trick.

Calculating the distance between the mouse and the object to decide if the mouse is on the image, near or far from it.

The variable distanciaMinimasets the minimum distance at which the mouse is considered to be close to the image.

$(function(){

  var $img = $('.image');
  var $container = $(".container");
  

  var estaEncima;
  var estaCerca;
  var distanciaMinima = 30;
  
  $container.on('mousemove', function(e){
    var distance = calculateDistance(e.pageX, e.pageY, $img);
    if (distance.x === 0 && distance.y === 0){
      // Está encima
      if (estaEncima === false){
        console.log('Estoy sobre la imagen');
        estaEncima = true;
        estaCerca = true;
      }
      return;
    }
    // No está encima
    if (estaEncima === true) {
      console.log('Ya no estoy sobre la imagen');
    }
    estaEncima = false;
      
    var distanciaCalculada = Math.floor(Math.sqrt(Math.pow(distance.x, 2) + Math.pow(distance.y, 2)));
    var cerca = distanciaCalculada < distanciaMinima;
    if (cerca !== estaCerca){
      estaCerca = cerca;
      console.log(estaCerca
        ? 'Estoy cerca de la imagen'
        : 'Ya no estoy cerca de la imagen');
    }
      
  });
  
  function calculateDistance(x, y, elem){
    var elemX = elem.offset().left;
    var elemY = elem.offset().top;
    var elemX2 = elemX + elem.width();
    var elemY2 = elemY + elem.height();
    var distanceX = x < elemX
      ? elemX - x
      : (x > elemX2 ? x - elemX2 : 0);
    var distanceY = y < elemY
      ? elemY - y
      : (y > elemY2 ? y - elemY2 : 0);
    return { x: distanceX, y: distanceY };
  }

});

.container{
  width: 500px;
  height: 500px;
  border: solid 1px black;
  padding: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="image" src="http://placehold.it/200" />
</div>

you can add a div element and with the padding property you specify the range of approach to the image, and add the mouseenter event, it would be something like this:

var img = document.querySelector("img");
var cont = document.getElementById("cont");

 cont.addEventListener("mouseenter", function() {
  console.log("Estoy cerca de la imagen");
});

img.addEventListener("mouseenter", function() {
  console.log("Estoy sobre la imagen");
});

   img.addEventListener("mouseleave", function() {
  console.log("Ya no estoy sobre la imagen");
});

<div id='cont' style='background-color:red;padding:10%;height:200px;width:200px;' >
<img src="http://placehold.it/200" />
</div>

INTRODUCTION:

To do it with pure javascript we will do the following: We will create a function so that when a mouse event is triggered (in this case onmousemove) it checks the distance between the mouse and the object (both already defined) and in the case of being fulfilled it would the action we want.

REQUIRED PARAMETERS:

Therefore we would need three parameters:

objeto = el elemento HTML que accionara la funcion.
distancia = cantidad que deseamos entre el mouse y el objeto.
evento = el evento que accionara la comprobacion de la distancia.

METHODS AND FUNCTIONS TO USE:

We already have the parameters ready, the next thing would be to obtain the four sides of the object, we will do this with offset, which allows us to obtain the position in pixels of the margin or limit part of the element.

We will have two possibilities offsetLeftand offsetTop.

It would be necessary to define the bottom and right part of the object, so we will use:

widthto get the width (this being used to calculate the right margin) heightthe height (to calculate the lowest point)

GRAPH FOR BETTER UNDERSTANDING:

Let's first think about this plot of the X/Y axes:

        100
         50
-100 -50 0 50 100
         -50
         -100

With which we will be guided in the calculations for the limit of the object.

DEFINING THE LIMITS:

LEFT:

Now we start then to create the sides of the object:

var izquierdo= objeto.offsetLeft - distancia;

We get the value of the left margin and then we subtract the distance to create the limit that we want with the object with respect to the left side, if we subtract it the limit position will be shifted to the left.

HIGHER:

var superior= objeto.offsetTop - distancia;

We get the value of the top margin and then we subtract the distance to create the limit that we want with the object with respect to its height.

LAW:

Now let's go with the calculated sides:

For the right we will use the position of the left margin and then we will add the width of the object, this would result in the right margin, and then we add the distance that we want from the limit.

var derecho = izquierdo + objeto.witdh() + (2*distancia);

The multiplication is used, because the limit with the distance without multiplying would be right in the margin of the object.

LOWER:

For the bottom we will use the position of the top margin and then we will add the height of the object, this would result in the right margin, and then we add the distance that we want from the limit.

var inferior = superior + objeto.heigth() + (2*distancia);

Multiplication is used, because the limit with the distance without multiplication would be right at the edge of the object.

FINAL LIMITS:

Leaving our limits like this:

var izquierdo = objeto.offsetLeft - distancia;
var superior = objeto.offsetTop - distancia;
var derecho =  izquierdo + objeto.width() + (2*distancia);
var bottom = superior + objeto.height() + (2*distancia);

MOUSE POSITION:

Next we need to get the position (coordinates) of the mouse for both the X and Y axis.

For this we will use pageXand pageY, which will react with the event (onmousemove)

Let's save like this:

var X= evento.pageX;
var Y= evento.pageY;

Where event will be:

document.onmousemove 

CHECKING DISTANCE:

We will see how to check the position of the mouse in relation to the object and the Cartesian plane, with which the following must be true:

• The X position is greater than the left margin
• The X position is less than the right margin
• The Y position is greater than the top margin
• The Y position is less than the bottom margin.

Now we will use a return to know if it is fulfilled or not, as follows:

return ( X > izquierdo && X < derecho && Y > superior && Y < inferior );

END FUNCTION:

function cercano( objeto, distancia, evento ) {

    var izquierdo = objeto.offsetLeft - distancia;
    var superior = objeto.offsetTop - distancia;
    var derecho = izquierdo + objeto.width() + (2*distancia);
    var inferior = superior + objeto.height() + (2*distancia);
    var X = evento.pageX;
    var Y = evento.pageY;

    return ( X > izquierdo && X < derecho && Y > superior && Y < inferior );

};

TRIGGER MOUSE EVENT:

We will declare within our JavaScript file the function to calculate when the event occurs onmousemove, looking like this:

<img id="imagen" src="http://placehold.it/200" />

<script>
document.onmousemove = function () {
    var objeto = document.getElementById("imagen");
    var evento = document.event;
    if (cercano(objeto, 20, evento)) {
        console.log("estoy Cerca");
    }
    }

END CODE:

    <img id="imagen" src="http://placehold.it/200" />

    document.onmousemove = function () {
    var objeto = document.getElementById("imagen");
    var evento = document.event;
    if (cercano(objeto, 20, evento)) {
        console.log("estoy Cerca");
    }

     function cercano( objeto, distancia, evento ) {

        var izquierdo = objeto.offsetLeft - distancia;
        var superior = objeto.offsetTop - distancia;
        var derecho = izquierdo + objeto.width + (2*distancia);
        var inferior = superior + objeto.height + (2*distancia);
        var X = evento.pageX;
        var Y = evento.pageY;

        return ( X > izquierdo && X < derecho && Y > superior && Y < inferior );

    }
}

With this our function would be ready

LET'S ADD STYLE TO SEE IT BETTER:

function cercano(objeto, distancia, evento) {
        var izquierdo = objeto.offsetLeft - distancia;
        var superior = objeto.offsetTop - distancia;
        var derecho = izquierdo + objeto.width + (2*distancia);
        var inferior = superior + objeto.height + (2*distancia);
        var X = evento.pageX;
        var Y = evento.pageY;
        return (X > izquierdo && X < derecho && Y > superior && Y < inferior);

    }
    document.onmousemove = function () {
    var objeto = document.getElementById("imagen");
    var evento = window.event;
    if (cercano(objeto, 30, evento)) {
        alert("estoy Cerca");
    }
}

<img id="imagen" src="http://placehold.it/200"/>

CREDITS:

https://stackoverflow.com/questions/7911604/function-for-mouse-near-an-element-in-jquery

You just have to add a div with a specific size and add padding to the div:

Example if your image is 100x100 px, your div will be 200x200 px and so you add a 100px padding to the div and you have that range for what you want to do, you add the event to the div and it would be everything.

<style>
  div{
   width: 200px;
   height: 200px;
   padding: 100px; //(si es necesario)
  }
  img{
   width: 100px;
  }
</style>
<div 'aqui-el-evento'>
 <img src="x">
</div>

And with this it should work without, I didn't test the code but it should work adapted to your needs.