Eventos de ratón en jQuery mouseenter y mouseleave

En este artículo de DesarrolloWeb.com veremos un ejemplo de página sencilla que utiliza eventos de ratón, para la construcción de un sistema de tip muy simple, es decir, construiremos una serie de áreas "calientes" en la página, sobre las que situando el ratón por encima, aparecerá un mensaje explicativo que tenemos en otra capa. 

Como ya debemos de conocer, si hemos leído hasta este punto el Manual de jQuery, existen diversos eventos que se invocan al realizar acciones con el ratón, como clics, movimiento del puntero o posicionar el puntero sobre ciertos elementos. 

En este artículo utilizaremos mouseenter y mouseleave, que son los eventos más interesantes y útiles si queremos detectar el momento en el que entramos con el puntero del ratón sobre un elemento o salimos de su superficie. 

Además, utilizaremos el objeto evento, que recibe la función con la que implementamos el manejador del evento, que tiene diversos datos útiles sobre el evento que se acaba de ejecutar. En este artículo mostraremos cómo averiguar la posición del ratón en el momento de producirse el evento, que podemos extraer con las propiedades pageX y pageY del objeto evento. 

Nota: Para el que llegue aquí sin haber leído otras informaciones sobre eventos en jQuery, le recomendamos comenzar la lectura por el artículo de Eventos en jQuery.