Help with onmouseout timed with 3 paragraphs
I have the following code. What I want is that everytime the user does a mouseover on Contact he can see the info on class para1. When he does a mouseover on Description he can see para2. Then on More he can see para 3. Yet if he wants to see the description he can do so. Once he is out of the popupbox description the popup box should disappear. This should also happen with para3.
<div id="sidebar">
<ul>
<li><a href="">Contact</a></li>
<li><a href="">Description</a></li>
<li><a href="">More...</a></li>
</ul>
</div>
<div id="ads" class="wide">
<div class="ad">
<a href=""><img src=ad.jpg" width="30" height="25" alt="I am an ad" /></a>
</div>
<div class="popup hide">
<a href="#" id="close"></a>
<ul>
<li class="hide">
<div class="content">
<p id="para1">
<span class="info">street_address</span><br />
<span class="info">unit</span><br />
<span class="info">city</span>,
<span class="info"></span>province<br />
<span class="info">postal</span><br /><br /><br />
<span class="info">12345678</span>
</p>
</div>
</li>
<li class="hide">
<div class="content">
<p id="para2">Description:
<span tal:content="context/description">Lorem supum </span><br />
</p>
</div>
</li>
<li class="hide">
<div class="content">
<p id="para3">Website:
<span tal:condition="context/url"><a tal:content="context/title" tal:attributes="href context/url"></a></span><br />
</p>
</div>
</li>
</ul>
</div>
------------------------------------------------------------JS script--------------------------------------------------------------------------
$("#sidebar ul li").mouseover(function() { //show popup on mouseover
$("#ads .popup").show(); //show popup box
$("#sidebar ul").addClass("active"); //show popup arm
var position = $(this).position(); //get selected list item position
var height = $(this).height(); //get selected list item height
var fontheight = 22; //adjust this number depending on size of list font
position = parseInt(position.top) + (parseInt(height) / 2) - fontheight;
//center popup arm behind selected list item
$(this).parent().css("backgroundPosition", "right " + position + "px"); //set popup arm position based on selected list item
$("#ads .popup ul li").hide(); //hide all popup content
var liIndex = $("#sidebar ul li").index(this); //get selected list item index
$("#ads .popup ul li").eq(liIndex).show(); //show popup content that corresponds with selected list item
This works out fine but then I do this and
$("#ads .popup ul li").mouseout(function() { //close popup on mouseover
$("#ads .popup").hide(); //hide popup box
$("#sidebar ul").removeClass("active"); //hide popup arm
$("#ads .popup ul li").gt(para1).show(); //hide popup content for paragraphs >1
return false; //cancel link href
});
Here I am trying, on a mouseout, display nothing. Yet if the user hovers over Description he will be able to see the para2 and if he hovers over More he will be able to see para 3. If he doesnt hover any of those then the popupbox doesnt display for any of the three.