title: CSS/Javascript Mouseover Popup box
body: <p>I have table cell with a javascript/css content box that pops up upon mouseover.</p>
  
  <p>There are 20 cells on the page.  Everything is working correctly, in that when you mouseover the product link, you see the content box.  However, I want to put a LINK inside the content box that the user can click on if they choose.  So, the popup box has to stay up long enough for the user to mouseover to click the link.</p>
  
  <p>Really, I want the OnMouseOver to stay open until either a second or two has gone by and/or the user OnMouseOver's another cell.</p>
  
  <p>The problem I'm having is that the pop up box doesn't stay open (due to OnMouseOut) to click the link.  If I turn OnMouseOut off (which I tried), then all the pop up boxes just stay open, so this doesn't do the job either.</p>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>&lt;style type="text/css" title=""&gt;
      .NameHighlights         {position:relative; }
      .NameHighlights div     {display: none;}
      .NameHighlightsHover    {position:relative;}
      .NameHighlightsHover div {display:block;position:absolute;width: 15em;top:1.3em;*top:20px;left:70px;z-index:1000;}
  &lt;/style&gt;
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code>&lt;td&gt;
      &lt;span class="NameHighlights" onMouseOver="javascript:this.className='NameHighlightsHover'" onMouseOut="javascript:this.className='NameHighlights'"&gt;
      &lt;a href="product link is here"&gt;Product 1&lt;/a&gt;
             &lt;div&gt;
              # of Votes:  123&lt;br&gt;
              % Liked&lt;br&gt;
              &lt;a href="product review link&gt;See User reviews&lt;/a&gt;
              &lt;/div&gt;
      &lt;/span&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>So, how can I make the pop up box stay open long enough to click on the link, but also make it disappear if another content box is activated?</p>
  
  <p>Thanks in advance.</p>