Brad Bansner
asked on
Using mouseout to close drop-down menu not working properly
My test page:
http://partnersdesign.net
Mouseover the "make contact" text at the top-right, and a menu appears below it. That works fine.
I'm trying to create a smooth, usable mouseout effect. I thought if the user mouses away from the menu, it should close (the actual menu, not the menu's opener "make contact"). This is what I have:
$('#contact').mouseout(fun ction(){
$('#contact').slideUp(500) ;
});
However, if you mouseover the "EMAIL" link, that apparently counts as a "mouse out" of the <div> that contains it, and the menu closes prematurely. My markup looks like this:
<a id="contactbtn">MAKE CONTACT</a>
<div id="contact">
610.488.7611
<div class="blackline"></div>
<a href="mailto:info@partners design.net ">EMAIL</a >
<div class="blackline"></div>
<a href="https://www.facebook.com/pages/Partners-Design-Inc/62221992069?fref=ts" target="_blank">FACEBOOK</ a>
</div>
Is there a better way to handle the mouseout so it works more smoothly?
Thank you!
http://partnersdesign.net
Mouseover the "make contact" text at the top-right, and a menu appears below it. That works fine.
I'm trying to create a smooth, usable mouseout effect. I thought if the user mouses away from the menu, it should close (the actual menu, not the menu's opener "make contact"). This is what I have:
$('#contact').mouseout(fun
$('#contact').slideUp(500)
});
However, if you mouseover the "EMAIL" link, that apparently counts as a "mouse out" of the <div> that contains it, and the menu closes prematurely. My markup looks like this:
<a id="contactbtn">MAKE CONTACT</a>
<div id="contact">
610.488.7611
<div class="blackline"></div>
<a href="mailto:info@partners
<div class="blackline"></div>
<a href="https://www.facebook.com/pages/Partners-Design-Inc/62221992069?fref=ts" target="_blank">FACEBOOK</
</div>
Is there a better way to handle the mouseout so it works more smoothly?
Thank you!
you need to apply cancelBubble() to the event that fires in your a tag
ASKER
I'm not following you. How do I modify my script to make the menu slide up at the right time?
$('#contact').mouseout(fun ction(){
$('#contact').slideUp(500) ;
});
$('#contact').mouseout(fun
$('#contact').slideUp(500)
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I ended up doing this:
$('#contact').mouseout(fun ction(){
if ($('#contact').is(':hover' )===false && $('#contacthover1').is(':h over')===f alse && $('#contacthover2').is(':h over')===f alse){
$('#contact').slideUp(500) ;
}
});
So now it just checks each element individually to make sure it isn't in a mouseover state... if none are moused over, then it closes the menu.
$('#contact').mouseout(fun
if ($('#contact').is(':hover'
$('#contact').slideUp(500)
}
});
So now it just checks each element individually to make sure it isn't in a mouseover state... if none are moused over, then it closes the menu.