一个令人纠结的弹窗问题,鼠标放上去显示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();
		   });
		});