title: Ajax content invisible in firebugs, and unable to use hover function
body: <p>I used ajax call to generate content when user input query, it works well until I try to use jquery's hover function.</p>
  
  <pre><code>$(document).ready(function() {
    $(".numbers").hover(function(){
      $(".fullUnits").fadeIn(80);
      $(".units").fadeOut(0);    
    }, function(){
      $(".fullUnits").fadeOut(0);
      $(".units").fadeIn(80);
    });
  });
  </code></pre>
  
  <p>the code above is actually correct, it doesn't work because .number is invisible to browser. this is how it looks in firebugs.grayed out which means not visible. so you cannot hover on it.(sorry, I cannot post image now)</p>
  
  <p><a href="http://converteveryunit.com/firebug.png" rel="nofollow noreferrer">Screenshot http://converteveryunit.com/firebug.png</a></p>
  
  <p>the following code is the ajax code, which is used to generate content</p>
  
  <pre><code>function showHint()
  {
    var str = document.getElementById("inputText").value;
    if (str.length==0)
    { 
      document.getElementById("txtHint").innerHTML="";
      return;
    }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else
    { // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
      {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
    }
    var query = "gethint.php?q="+str;
    if (document.getElementById("m2u").checked) 
    {
      query = query + "&amp;mode=m2u";
    }
    else if (document.getElementById("u2m").checked) 
    {
      query = query + "&amp;mode=u2m";
    }
  
    xmlhttp.open("GET",query,true);
    xmlhttp.send();
  
  }
  </code></pre>
  
  <p>in case you need other code, the demo is at <a href="http://converteveryunit.com" rel="nofollow noreferrer">converteveryunit.com</a></p>