mouseover, mouseout question
Hi, i am new to jquery and have a problem to solve. Below is the query i am using, which at the moment displays a menu when you hover over the links. To close the menus i have to hover over the "default" value as the menu stays open. I need to close the menu when user hovers out from the link - so open on mouseover and close on mouseout. Hope tha makes sense
$(document).ready(function(){
$(".menu > li").mouseover(function(e){
switch(e.target.id){
case "default":
//change status & style menu
$("#default").addClass("active");
$("#elec_gas").removeClass("active");
$("#home_energy").removeClass("active");
$("#green_energy").removeClass("active");
$("#cust_services").removeClass("active");
$("#faq").removeClass("active");
//display selected division, hide others
$("div.default").css("display", "none");
$("div.elec_gas").css("display", "none");
$("div.home_energy").css("display", "none");
$("div.green_energy").css("display", "none");
$("div.cust_services").css("display", "none");
$("div.faq").css("display", "none");
break;
case "elec_gas":
//change status & style menu
$("#default").removeClass("active");
$("#elec_gas").addClass("active");
$("#home_energy").removeClass("active");
$("#green_energy").removeClass("active");
$("#cust_services").removeClass("active");
$("#faq").removeClass("active");
//display selected division, hide others
$("div.default").css("display", "none");
$("div.elec_gas").fadeIn();
$("div.home_energy").css("display", "none");
$("div.green_energy").css("display", "none");
$("div.cust_services").css("display", "none");
$("div.faq").css("display", "none");
break;
case "home_energy":
//change status & style menu
$("#default").removeClass("active");
$("#elec_gas").removeClass("active");
$("#home_energy").addClass("active");
$("#green_energy").removeClass("active");
$("#cust_services").removeClass("active");
$("#faq").removeClass("active");
//display selected division, hide others
$("div.default").css("display", "none");
$("div.home_energy").fadeIn();
$("div.elec_gas").css("display", "none");
$("div.green_energy").css("display", "none");
$("div.cust_services").css("display", "none");
$("div.faq").css("display", "none");
break;
}
//alert(e.target.id);
return false;
});
});