一个令人纠结的弹窗问题,鼠标放上去显示div,鼠标离开div消失

问题描述:

当鼠标放到"操作"上边时,显示"删除"框,当鼠标离开"操作"时,"删除"框消失.

"操作"为 a[id^='action_'

"删除"为 div[id^='dropDowmMenu_"+postfix+"']

jQuery("a[id^='action_']").mouseenter(function(){
var postfix=jQuery(this).attr("id").substring("action_".length);
jQuery("div[id^='dropDowmMenu_"+postfix+"']").css({"display":"block"});
});

jQuery("div[id^='dropDowmMenu_']").mouseenter(function(){
var postfix=jQuery(this).attr("id").substring("dropDowmMenu_".length);
jQuery("div[id^='dropDowmMenu_"+postfix+"']").css({"display":"block"});
});

jQuery("a[id^='action_']").mouseout(function(){
var postfix=jQuery(this).attr("id").substring("action_".length);
jQuery("div[id^='dropDowmMenu_"+postfix+"']").css({"display":"none"});
});

jQuery("div[id^='dropDowmMenu_']").mouseleave(function(){
jQuery(this).css({"display":"none"});
});/**/

第二种方法(目前为止最好的)

思路,将第三级菜单放到第二级菜单中,将第三级菜单绝对定位.

一下不是完整的代码,仅作参考

jQuery(document).ready(function(){
jQuery("ul[id^='mn_'] li").mouseover(function(){
var a=jQuery(this).find("a");
var ahref=a.attr("href");
var index=ahref.indexOf("catid=");
var parentId=ahref.substring(index+6);
if(!isNaN(parentId)){
jQuery("ul#thirdLevelNav").hide();
jQuery("li[class^='parent_catid']").hide();

var children=jQuery("li[class='parent_catid"+parentId+"']");
if(children.length>0)
{
jQuery("ul#thirdLevelNav").show();
jQuery("li[class='parent_catid"+parentId+"']").show();
}
}

//将第二级菜单放到第二级菜单中，这里因为情况特殊，所以使用append将第三级菜单放到了第二级菜单中了
jQuery(this).append(jQuery("ul#thirdLevelNav"));

var offset = jQuery(this).offset();

jQuery("ul#thirdLevelNav").offset({ top: offset.top, left:(offset.left+103) });

});

jQuery('ul#mn_P54_menu').mouseleave(function(){
jQuery("ul#thirdLevelNav").hide();
});
});