Las podemos utilizar en formularios, en menús, en imágenes, etc.

Vamos a enseñaros un ejemplo con un formulario, para darle un toque algo más vistoso y validando los campos.

Primero vamos a crear los 3 estilos distintos para el formulario, que vamos a ir añadiendo y quitando con distintos eventos.

.input_text {
	background:#FFF;
	width:150px;
	height:22px;
	line-height:22px;
	padding:4px;
	border:1px solid #999;
}

.input_text_encima {
	width:148px;
	height:20px;
	line-height:20px;
	border:2px solid #00CC00;
	color:#009900;
}

.input_text_dentro {
	width:148px;
	height:20px;
	line-height:20px;
	border:2px solid #00CC00;
	color:#000000;
	background:#e3e3e3;
}

.input_text_error {
	width:148px;
	height:20px;
	line-height:20px;
	border:2px solid #FF0000;
	color:#FF0000;
}

Ahora vamos a cambiar el estilo del formulario al pasar por encima del campo y al salir fuera con addClass y removeClass:

$(".input_text").mouseenter(function() {
	$(this).addClass("input_text_encima");
});
$(".input_text").mouseleave(function() {
	$(this).removeClass("input_text_encima");
});

Al pasar el ratón por encima del campo le añadiremos la clase input_text_encima al campo con addClass y al sacar el ratón fuera del campo, le quitaremos la clase input_text_encima con removeClass.

Ahora vamos a cambiar el estilo del formulario al entrar en el campo o presionar el campo para editarlo, le añadiremos la clase input_text_dentro y se la quitaremos al salir del campo o presionar fuera.

$(".input_text").focus(function() {
	$(this).addClass("input_text_dentro");
});
$(".input_text").blur(function() {
	$(this).removeClass("input_text_dentro");
});

Ahora vamos a validar los 2 campos del formulario. En vez de mostrar el mensaje de error en un alert, vamos a cambiar el estilo del campo para indicar que el campo no ha sido rellenado correctamente.

$("#formulario").submit(function () {
	if($("#nombre").val().length < 5) {
		$("#nombre").addClass("input_text_error");
		return false;
	}
	if($("#telefono").val().length < 9) {
		$("#telefono").addClass("input_text_error");
		return false;
	}
	return false;
});

• Ejemplo

Con HTML y CSS deberíamos hacerlo con las etiquetas <a> para poder hacer este efecto, con jQuery no es necesario especificar que se trata de un enlace <a> para hacer este efecto de cambio de color, al pasar por encima del texto/enlace.

Aquí os enseño el código jQuery que vamos a utilizar:

$(document).ready(function(){
	$(".menu li").mouseenter(function() {
		$(this).css("background","#006699");
	});
	$(".menu li").mouseleave(function() {
		$(this).css("background","#666666");
	});
});

Por defecto el color de fondo es background:#666666;, con el evento mouseenter le cambiamos el fondo a background:#006699; al pasar por encima. Y con mouseleave le volvemos a cambiar el fondo a background:#666666; al sacar el ratón fuera del texto/enlace. Aquí el menú HTML:

<ul class="menu">
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>Enlace 3</li>
<li>Enlace 4</li>
<li class="fin">Enlace 5</li>
</ul>

Y el CSS:

.menu {
	float:left;
	width:100%;
	height:30px;
	line-height:30px;
	padding:0px;
	margin:0px;
	list-style-type:none;
	background:#666666;
	margin-bottom:10px;
}

.menu li {
	float:left;
	padding-left:33px;
	padding-right:33px;
	height:30px;
	line-height:30px;
	background:#666666;
	color:#FFFFFF;
	border-right:1px solid #FFFFFF;
}

.menu li.fin {
	border:0px;
}

• Ejemplo

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