June 10, 2010
Jquery show div on hover then when user hovers out of div hide it help?
Question by user342391
I have a menu and when I hover one of the links a div shows. I want the user to be able to hover over this div but when the user hovers out of the div (mouseout i think its called) I want it to hide.
Imagine a dropdown menu in css, the user hovers over the link and the sub nav is shown, when the user hovers out or away from the link and sub nav the sub nav dissapears. How can this be done with jquery???
this is what I have:
$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
$(".plans").hover(
function() {
$(".mainnavbottom").show("fast");
}, function(){
$(".mainnavbottom").mouseout.hide("slow");
});
});
Answer by realshadow
Try something like this:
$('.mainnavbottom').bind('mouseenter mouseleave', function(event) {
switch(event.type) {
case 'mouseenter':
// when user enters the div
$(".mainnavbottom").show("fast");
break;
case 'mouseleave':
// leaves
$(".mainnavbottom").hide("slow");
break;
}
});
This code works particulary good if you want to append a div that has e.g. ajax loaded content, but it should very well work with your css menu.
Hope this helps
Answer by Starx
Try
$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
$(".plans").mouseover(function() {
$(".mainnavbottom").show("fast");
}).mouseout(function(){
$(".mainnavbottom").hide("slow");
});
});
