jQuery .hover() 仅适用于 FireFox

Question

我需要向几个菜单项添加信息弹出窗口，并且我使用 jQuery .hover 来执行此操作。但是，这只适用于 Firefox，不适用于 Safari、Chrome 或 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();
});

我的其他方法在上下文中工作，所以我的关闭很好。被注释掉的 jQuery 行代表了我尝试过的产生相同结果的其他转换：适用于 Firefox，但不适用于其他。我不确定我做错了什么。

仅供参考，.info_popup div 被赋予一个 css 样式 display:none 在外部样式表中隐藏它。

任何帮助将不胜感激。

***这里是一些html...注意这代表输出，html主要由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>

好的，这是我的代码的最新重新排列。 HTML 现在看起来像这样：

<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>

而 javascript 看起来像这样：

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();
});

还是同样的问题。

Answer 1

（已编辑以使用您的 html）

由于您要指定选择器上下文（将 ,this 添加到您的选择器），.info_popup 元素必须在 inside this 元素中。注意 info_popup div 是如何在 a 元素内的。 我不确定这就是你想要的，但它与你的代码匹配。 由于你的 info_popup 在 a 元素之外，所以使用 $(this).parent() 作为你的选择器。

我把这个扔进了jsFiddle 给你。我在 Chrome 中使用它并且它有效。

下面还有代码：

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();
});​