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

来源：互联网发布：巴黎红灯区知乎编辑：程序博客网时间：2024/06/11 04:47

问题描述:

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

"操作"为 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();   });});

0 0