我需要向多个菜单项添加信息弹出窗口,我使用 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();
});
还是一样的问题。
最佳答案
(编辑为使用您的 html)
由于您要指定一个选择器上下文(将 ,this 添加到您的选择器),.info_popup 元素必须位于 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();
});
关于javascript - jQuery .hover() 仅适用于 FireFox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3591489/