jQuery .hover() only working in FireFox

Question

I need to add informational popups to several menu items, and Im using jQuery .hover to do so. However this only works in Firefox and does not work in Safari, Chrome or Opera.

var Main = function() {

    //other functions...

    function _setPopups() {
        $(".dt_event_title a").hover(
            function(){
                $(".info_popup",this).css({"display":"block"});
                //$(".info_popup",this).fadeTo("normal",1);
                //$(".info_popup",this).fadeIn("normal");
                //$(this).find(".info_popup").fadeIn("normal");

            },
            function(){
                $(".info_popup",this).css({"display":"none"});
                //$(".info_popup",this).fadeTo("normal",0);
                //$(".info_popup",this).fadeOut("normal");
                //$(this).find(".info_popup").fadeIn("normal");
            }
        );
    }
    return {
        //other methods...
        "setPopups" : function(){ _setPopups(); }
    };
}();
$(document).ready(function(){
    //other method calls...
    Main.setPopups();
});

My other methods are working in the context so my closure is fine. The commented-out jQuery lines represent other transformations I tried that produced the same results: works in Firefox, but not others. I'm not sure what I could be doing wrong.

FYI the .info_popup div is given a css style display:none in an external style sheet to hide it.

Any help would be appreciated.

***Here is some of the html... note this represents the output, the html is largely generated by php

<tr class="dt_event_title">
   <td>
      <a class="dt_event_link" href="...php generated link...">
         <span class="info_icon"></span>
         <span class="event_title">Title of Event</span>
      </a>
      <div class="info_popup">   
         ...some php generated content
      </div>
      <div class="dt_event_date">
          09-15-2010 02:00 pm - 02:00 pm          
      </div>
   </td>
</tr>

Ok Here is the latest rearrangement of my code. The HTML now looks like this:

<tr>
   <td>
      <div class="dt_event_title">
         <a class="dt_event_link" href="php generated link">
            <span class="info_icon"></span>
            <span class="event_title">php generated title</span>
         </a>
         <div class="dt_event_date">php generated date</div>
         <div class="info_popup">
            <div class='popup_title'>php generated title</div>
            <div class='popup_date'>php generated date</div>
            <div class='popup_time'>php generated time</div>
            <div class='popup_arrow'></div>
         </div>
      </div>
   </td>
</tr>

And the javascript looks like this:

var Main = function() {

    function _setPopups() {
        $(".dt_event_title").hover(
            function(){
                $(".info_popup",$(this)).fadeIn("fast");
            },
            function(){
                $(".info_popup",$(this)).fadeOut("fast");
            }
        );
    }
    return {
        "setPopups" : function(){ _setPopups(); }
    };
}();
$(document).ready(function(){
    Main.setPopups();
});

And still the same problem.

Answer 1

(Edited to use your html)

Since you are specifying a selector context (adding ,this to your selector), the .info_popup element must be inside the this element. Notice how the info_popup div is inside the a element. I'm not sure that's what you want, but it matches your code. Since your info_popup is outside the a element, use $(this).parent() as your selector.

I tossed this into a jsFiddle for you. I am using it in Chrome and it works.

Code below also:

HTML

<table>
<tr class="dt_event_title">
   <td>
      <a class="dt_event_link" href="...php generated link...">
         <span class="info_icon"></span>
         <span class="event_title">Title of Event</span>
      </a>
      <div class="info_popup">   
         ...some php generated content
      </div>
      <div class="dt_event_date">
          09-15-2010 02:00 pm - 02:00 pm          
      </div>
   </td>
</tr>
</table>​

CSS

.info_popup { display:none; }​

JS

var Main = function() {

    //other functions...
    function _setPopups() {
        $(".dt_event_title a").hover(
            function(){
                $(".info_popup",$(this).parent()).show(); //switched to .show() and $(this).parent()
                //$(".info_popup",this).fadeTo("normal",1);
                //$(".info_popup",this).fadeIn("normal");
                //$(this).find(".info_popup").fadeIn("normal");

            },
            function(){
                $(".info_popup",$(this).parent()).hide(); //switched to .hide() and $(this).parent()
                //$(".info_popup",this).fadeTo("normal",0);
                //$(".info_popup",this).fadeOut("normal");
                //$(this).find(".info_popup").fadeIn("normal");
            }
        );
    }
    return {
        //other methods...
        "setPopups" : function(){ _setPopups(); }
    };
}();
$(document).ready(function(){
    //other method calls...
    Main.setPopups();
});​