Menú interactivo con mouseenter y mouseleave con jQuery

Este ejemplo se puede realizar con HTML y CSS, pero para seguir explicando como funcionan los eventos mouseenter y mouseleave viene bien este ejemplo. En este ejemplo tan sencillo vamos a cambiar con css() el fondo del menú al pasar por encima.

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