Ajax content invisible in firebugs, and unable to use hover function

I used ajax call to generate content when user input query, it works well until I try to use jquery's hover function.

$(document).ready(function() {
  $(".numbers").hover(function(){
    $(".fullUnits").fadeIn(80);
    $(".units").fadeOut(0);    
  }, function(){
    $(".fullUnits").fadeOut(0);
    $(".units").fadeIn(80);
  });
});

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)

Screenshot http://converteveryunit.com/firebug.png

the following code is the ajax code, which is used to generate content

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 && xmlhttp.status==200)
   开发者_运维问答 {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  var query = "gethint.php?q="+str;
  if (document.getElementById("m2u").checked) 
  {
    query = query + "&mode=m2u";
  }
  else if (document.getElementById("u2m").checked) 
  {
    query = query + "&mode=u2m";
  }

  xmlhttp.open("GET",query,true);
  xmlhttp.send();

}

in case you need other code, the demo is at converteveryunit.com

you must bind your hover event after the content is onloaed