Close DIV Popup When it Looses Focus

[Steve Dyke]

I am using a link:hover to open a DIV using jQuery to load DIV with a table of options.

I need this DIV to stay displayed only while the cursor is within the boundries of the DIV.

I have tried to set onmouseout event to DIV that gets loaded but the DIV disappears(I suppose the onmouseout is fired) when I move the mouse from the calling link to the option table.

[Bear Bibeault]

Check out .hover().

[Steve Dyke]

Bear Bibeault wrote:Check out .hover().

The following works great when I run it by itself. However, when I load it into a DIV tag using jQuery.load the hover will display the option correctly but when I move the cursor off of the hover item to move down the option list the options disappear.

<style>
  
 	
	ul.menulist { margin-left:20px; color:blue; float: left; width: 250px;}
  	li.menulist { cursor:default; }
  	span { color:red; }
	#t1, #t2{
		color: red;
		font-size:10pt;
		display: none;
	}

</style>
</head>  

  <DIV>
   
	<ul class="menulist">
	    <li class="menulist" id="l1">Rejection Tags</li>
	    
	    	<DIV id="t1">
	    		
				<input type="radio" name="rthoptions" onclick="initializeNewRejectionTag()">Initiate Rejection Tag<BR>
				<input type="radio" name="rthoptions" onclick="showRejectionTagQueues('${rejecttagqueuedefaultsource}','0')">Rejection Tag Queues(Open Only)<BR>
				<input type="radio" name="rthoptions" onclick="showRejectionTagQueues('${rejecttagqueuedefaultsource}','1')">Rejection Tag Queues(Archived)
						
		
 		   	</DIV>
   	</ul>
   	<ul class="menulist"> 
   
    	<li class="menulist" id="l2">Reports</li>
    		<DIV id="t2">
    			<input type="radio" name="rthoptions">TBD
    		</DIV>
  	</ul>
  	
  </DIV>
 
<SCRIPT type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.3.js"></SCRIPT>
<script>


$("#l1").hover(
  function () {
    document.getElementById("t1").style.display = "block";
  }, 
  function () {
   document.getElementById("t1").style.display = "none";
  }
);

$("#l2").hover(
  function () {
    document.getElementById("t2").style.display = "block";
  }, 
  function () {
   document.getElementById("t2").style.display = "none";
  }
);

</script>

[Steve Dyke]

I figured it out. I put the hover on the ul instead of the li tag.