Con el evento mouseenter y mouseleave podemos ejecutar una función asociada a dicha acción, al pasar por encima de un elemento, y al sacar el ratón del elemento.

Estos eventos son ideales para imágenes, para ejecutar alguna acción al pasar por encima de una imagen. Para realizar menús animados, al pasar por encima de un enlace, cambiar el color del fondo, el tamaño de la fuente, mover la posición del texto, etc.

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_img").mouseenter(function() {
		alert("Hemos metido el ratón dentro del elemento con clase ejemplo_img");
	});
	$(".ejemplo_img").mouseleave(function() {
		alert("Hemos sacado el ratón fuera del elemento con clase ejemplo_img");
	});
});
</script>
<div class="ejemplo_img"><img src="foto1.jpg" width="600" height="450" /></div>

Una vez que ya sabemos como utilizar estos eventos de posición del ratón, vamos a ejecutar una pequeña animación al pasar por encima de la imagen.

Con la función animate() de jQuery podemos animar un elemento cambiando su css, width, height, left, right, top, opacity, margin, fontsize, etc. En este ejemplo vamos a ocultar en css el título, y al pasar por encima de la imagen, con animate() vamos a cambiar su css y mostrarlo poco a poco con esta pequeña animación.

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_img").mouseenter(function() {
		$(".ejemplo_img_cont", this).stop().animate({ top:'390px' },{ queue:false, duration:300 });
	});
	$(".ejemplo_img").mouseleave(function() {
		$(".ejemplo_img_cont", this).stop().animate({ top:'450px' },{ queue:false, duration:300 });
	});
});
</script>

Por defecto le ponemos el top en 450px para ocultarlo debajo de la foto, y al pasar por encima (mouseenter) lo cambiamos a 390px para mostrarlo. Una vez que sacamos el ratón fuera (mouseleave) de la imagen,volvemos a poner el top en 450px para ocultarlo otra vez. Un ejemplo muy sencillo pero práctico para nuestros proyectos.

• Ejemplo