JavaScript中“鼠标靠近元素”的事件？

我只是将代码拼凑在一起，所以它可能有问题，但我认为这样的事情可能会奏效。

计算鼠标与对象之间的距离，以确定鼠标是否在图像上、靠近或远离图像。

该变量distanciaMinima设置鼠标被认为接近图像的最小距离。

$(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>

您可以添加一个 div 元素并使用 padding 属性指定接近图像的范围，并添加 mouseenter 事件，它会是这样的：

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>

介绍：

要使用纯 javascript 执行此操作，我们将执行以下操作：我们将创建一个函数，以便在触发鼠标事件时（在本例中为 onmousemove）它检查鼠标和对象之间的距离（均已定义）并且在这种情况下实现它将是我们想要的行动。

所需参数：

因此我们需要三个参数：

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.

使用方法和功能：

我们已经准备好参数，接下来是获取对象的四个边，我们将使用 来执行此操作offset，它允许我们获取元素的边距或限制部分的像素位置。

我们将有两种可能性offsetLeft和offsetTop。

有必要定义对象的底部和右侧部分，因此我们将使用：

width获取宽度（用于计算右边距） height高度（计算最低点）

更好理解的图表：

让我们首先考虑一下这个 X/Y 轴图：

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

我们将以此为指导计算物体的极限。

定义限制：

剩下：

现在我们开始创建对象的侧面：

var izquierdo= objeto.offsetLeft - distancia;

我们得到左边距的值，然后我们减去距离以创建我们想要的对象相对于左侧的限制，如果我们减去它，限制位置将向左移动。

更高：

var superior= objeto.offsetTop - distancia;

我们得到上边距的值，然后减去距离以创建我们想要的对象相对于其高度的限制。

法律：

现在让我们开始计算边：

对于右边，我们将使用左边距的位置，然后我们将添加对象的宽度，这将产生右边距，然后我们添加我们想要的与限制的距离。

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

使用乘法，因为没有乘法的距离限制将正好在对象的边缘。

降低：

对于底部，我们将使用上边距的位置，然后我们将添加对象的高度，这将产生右边距，然后我们添加我们想要的距离限制。

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

使用乘法，因为没有乘法的距离限制将正好在对象的边缘。

最终限制：

像这样离开我们的限制：

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

鼠标位置：

接下来我们需要获取鼠标在 X 和 Y 轴上的位置（坐标）。

为此，我们将使用pageXand pageY，它将对事件做出反应（onmousemove）

让我们这样保存：

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

活动地点：

document.onmousemove 

检查距离：

我们将看到如何检查鼠标相对于对象和笛卡尔平面的位置，以下必须为真：

• X 位置大于左边距
• X 位置小于右边距
• Y位置大于上边距
• Y 位置小于下边距。

现在我们将使用一个return来知道它是否被执行，如下：

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

结束功能：

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 );

};

触发鼠标事件：

我们将在 JavaScript 文件中声明计算事件发生时间的函数onmousemove，如下所示：

<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");
    }
    }

结束代码：

    <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 );

    }
}

有了这个，我们的功能就准备好了

让我们添加样式以更好地查看它：

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

学分：

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

您只需添加一个具有特定大小的 div 并向 div 添加填充：

例如，如果您的图像是 100x100 像素，那么您的 div 将是 200x200 像素，因此您向 div 添加了 100px 的填充，并且您拥有想要执行的范围，您将事件添加到 div 它将是一切。

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

有了这个它应该可以正常工作，我没有测试代码，但它应该可以适应您的需求。