Jquery hover problem

JavaScript
1

Hi I am just getting my teeth into Jquery and I have a niggling problem I can’t seem to solve. All I am trying to achieve is when a user rolls over a certain div another div appears and when the mouse leaves the div that has appeared it will then fade out, this happens but in the div that appears there are other elements and when the user rolls over them the mouseout events happens even though it is still in the div. Hope that makes sense!

Heres the code

$(document).ready(function (){
			$("#promotionalBoxPopup").hide();			
								
			$("#promotionalBox").hover(function (){
						$("#promotionalBoxPopup").slideDown("slow");
							$("#promotionalBoxPopup").mouseout(function (){
								$("#promotionalBoxPopup").fadeOut("slow");										
						});
			});
	})

<div id="promotionalBox">
      <h2 class="boxTitle" href="">Promotional</h2>
      For all our promotional<br />
      <div id="promotionalBoxPopup"><a href="http://www.logopens.co.uk/">Pens</a> <a href="http://www.padsandmats.com/">pads and mats</a><br />
        <a href="http://www.logosweets.co.uk">sweets</a> <a href="http://www.mugsgalore.com">mugs</a> </div>
    </div>
2

In the mouseout event, check if any of the parents are the promotionalBox element, and only if they’re not then go ahead with the fadeout.

3

Try once mouseenter and mouseleave events and see.


	$(document).ready(function (){
        $("#promotionalBoxPopup").hide();         
        $("#promotionalBox").mouseenter(function (){
            $("#promotionalBoxPopup").slideDown("slow");
            $("#promotionalBoxPopup").mouseleave(function (){
				$("#promotionalBoxPopup").fadeOut("slow");
				return false;                   
            });
        });
	})