Jquery hoverIntent触发器';输出';选择元素上的函数
下面的代码用于显示和隐藏大型下拉列表。如果将鼠标悬停在“dropDown”类的链接上,则会显示“child”。dropPanel。只要鼠标位于链接或放置面板上,放置面板将保持显示。将光标移动到链接或面板以外的任何位置,面板将隐藏。非常基本的东西 在一些大型下拉列表中,有一些表单包含select元素。在Firefox中,一切都很好。在IE中(特别是8,没有测试过任何其他版本),如果将鼠标悬停在drop panel中的select元素上,hoverIntent将触发dropPanelOff()的“out”函数,drop panel将隐藏 我如何防止这种情况Jquery hoverIntent触发器';输出';选择元素上的函数,jquery,hoverintent,Jquery,Hoverintent,下面的代码用于显示和隐藏大型下拉列表。如果将鼠标悬停在“dropDown”类的链接上,则会显示“child”。dropPanel。只要鼠标位于链接或放置面板上,放置面板将保持显示。将光标移动到链接或面板以外的任何位置,面板将隐藏。非常基本的东西 在一些大型下拉列表中,有一些表单包含select元素。在Firefox中,一切都很好。在IE中(特别是8,没有测试过任何其他版本),如果将鼠标悬停在drop panel中的select元素上,hoverIntent将触发dropPanelOff()的“o
// Apply Hover Intent to Menu Panels
$(".dropDown").hoverIntent({
sensitivity: 10,
interval: 150,
over: dropPanelOn,
timeout: 150,
out: dropPanelOff
});
// Menu Over function call
function dropPanelOn() {
$('a[rel="dropLink"]', this).addClass('hover');
$('.dropPanel', this).slideDown('fast');
}
// Menu Out function call
function dropPanelOff() {
obj = this;
$('.dropPanel', this).slideUp(100, function(){
$('a[rel="dropLink"]', obj).removeClass('hover');
$('.dropLink span', obj).removeClass('hover');
});
}
也许您应该只使用本机悬停事件,也可以为其添加延迟:
var time = false;
$(".dropDown").hover(function () {
if ($("dropPanel", this).is(":hidden")) $("dropPanel", this).slideDown('fast');
else window.clearTimeout(timer);
}, function () {
var obj = $(this);
timer = window.setTimeout(function () {obj.slideUp(100);}, 150);
});
尝试将此添加到代码中:
$(".dropDown select").mouseout(function(e) {
e.stopPropagation();
});
你解决过这个问题吗?我对firefox和登录表单也有同样的问题,firefox显示了一个存储用户名的列表,当你点击其中一个后,鼠标退出事件被触发