jQuery .hover () работает только в FireFox - PullRequest
Новая
       14

jQuery .hover () работает только в FireFox

2 голосов
/ 28 августа 2010

Мне нужно добавить информационные всплывающие окна к нескольким пунктам меню, и я использую 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, но не другие.Я не уверен, что могу делать что-то не так.

К вашему сведению, div .info_popup получает отображение стиля css: ни один во внешней таблице стилей, чтобы скрыть его.признателен.

*** Вот некоторые из 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>

Ok Вот последняя перестановка моегокод.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();
});

И все та же проблема.

1 Ответ

2 голосов
/ 28 августа 2010

(отредактировано для использования вашего HTML)

Поскольку вы задаете контекст селектора (добавляя , это к вашему селектору), элемент .info_popup должен быть внутри элемента this. Обратите внимание, как элемент div info_popup находится внутри элемента 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();
});​
...