懂js的大神帮忙修改一下，鼠标移过事件有问题

我要的不仅是鼠标移过去可以显示下拉菜单，而且下拉菜单可以选中，我写的这个无发选中下拉菜单，一想往下点它就消失了，帮忙修改一下我想做个导航条，每个网页都可以调用它，把它装在... 我要的不仅是鼠标移过去可以显示下拉菜单，而且下拉菜单可以选中，我写的这个无发选中下拉菜单，一想往下点它就消失了，帮忙修改一下
我想做个导航条，每个网页都可以调用它，把它装在了js文件中
这是我的Index.html文件：

<html>
<head>
<meta charset="UTF-8">
<title>爬山虎欢迎您</title>
<script src="js/head.js"></script>
</head>
<body id="1" onload="createHead()">
</body>
</html>
这是我的head.js文件：
function createHead(){
//显示的头部
var body=document.getElementById("1");

var div1=document.createElement("div");
div1.id="div1";
div1.style.position='absolute';
div1.style.left=375+"px";
div1.style.top=27+"px";
div1.style.width=125+"px";
div1.style.height=25+"px";

var div=document.getElementById("div1");
var a1=document.createElement("a");
a1.id="a1";
a1.href="#";
a1.innerText="关于爬山虎机构";
a1.setAttribute("onmouseover","ddd('a101','a102','a103','a104','a105','a106','','show')");
a1.setAttribute("onmouseout","ddd('a101','a102','a103','a104','a105','a106','','hide')");
div1.appendChild(a1);

body.appendChild(div1);
//第一个下拉菜单
var div101=document.createElement("div");
div101.style.id="div101";
div101.style.position='absolute';
div101.style.left=300+"px";
div101.style.top=52+"px";
div101.style.width=70+"px";
div101.style.height=10+"px";

var div=document.getElementById("div101");
var a101=document.createElement("a");
a101.id="a101";
a101.href="#";
a101.innerText="企业简介";
a101.style.display='none';
div101.appendChild(a101);

var div102=document.createElement("div");
div102.style.id="div102";
div102.style.position='absolute';
div102.style.left=370+"px";
div102.style.top=52+"px";
div102.style.width=70+"px";
div102.style.height=10+"px";

var div=document.getElementById("div102");
var a102=document.createElement("a");
a102.id="a102";
a102.href="#";
a102.innerText="企业新闻";
a102.style.display='none';
div102.appendChild(a102);

body.appendChild(div101);;
body.appendChild(div102);
}
function ddd(obj1,obj2,sTyle) {
var oDiv1 = document.getElementById(obj1);
var oDiv2 = document.getElementById(obj2);
if (sTyle=='show') {
oDiv1.style.display = 'block';
oDiv2.style.display = 'block';
}
if (sTyle=='hide') {
oDiv1.style.display = 'none';
oDiv2.style.display = 'none';
}
}
求大神修改，我不会css所以不要用css做，直接在我的基础上改下好吧
这两行写错
a1.setAttribute("onmouseover","ddd('a101','a102','show')");
a1.setAttribute("onmouseout","ddd('a101','a102','hide')") 展开

 我来答

5个回答

#热议# 不吃早饭真的会得胆结石吗？

好求知
2013-08-14 · TA获得超过6516个赞

知道大有可为答主

回答量：966

采纳率：80%

帮助的人：1178万

我也去答题访问个人页

关注

展开全部

楼主，我修改了一下代码，运行没问题。你的代码问题出在

①onmouseover和onmouseout不应该给a元素，因为a是行元素，没有宽度和高度设定，鼠标移出“关于爬山虎机构”这几个字就变成onmouseout了，onmouseover和onmouseout应该给div1。

②下拉菜单不应该设为绝对定位，这样相当于下拉菜单是浮在div1上面，也会触发onmouseout。下拉菜单应该设为div1的子元素。我等一下贴代码出来。

 function createHead(){
//显示的头部
tmp=["下拉菜单内容","简介","新闻"];
menu=[]; for(i=1;i<3;i++)menu.push('<div id=div10'+i+' class=divs><a id=a10'+i+' style=display:none>企业'+tmp[i]+'</a></div>');
styleSheet = document.createStyleSheet(); 
styleSheet.cssText=".divs{width:70;display:inline-block;margin-left:20} .divs:hover{background:E0E0E0}"
div1=document.createElement("div");
div1.id="div1";
body.appendChild(div1);
div1.outerHTML='<div id=div1 style="position:absolute;left:280;top:27;width:200;height:60;border:solid 1 gray" onmouseover=ddd(a101,a102,"") onmouseout=ddd(a101,a102,"none")>关于爬山虎机构<br>'+menu.join("")+'</div>'} 
function ddd(obj1,obj2,sTyle) {obj1.style.display=obj2.style.display=sTyle}

html

 <html>
<head>
<meta charset="UTF-8">
<title>爬山虎欢迎您</title>
<script src="head1.js"></script>
</head>
<body id=body onload="createHead()">
</body>
</html>

已赞过 已踩过<

评论收起

寒GG冰
2013-08-14 · TA获得超过108个赞

知道小有建树答主

回答量：173

采纳率：100%

帮助的人：77.4万

我也去答题访问个人页

关注

展开全部

a1.setAttribute("onmouseout","ddd('a101','a102','a103','a104','a105','a106','','hide')");//这句去掉
还要就是上面那个注册事件的方法建议不要用，兼容性不行，推荐你使用下面这种：
a1.onmouseover=function(){ddd('a101','a102','show');};

再加上下面两段
//加入点击后隐藏
a101.onclick=function(){ddd('a101','a102','hide');}
a102.onclick=function(){ddd('a101','a102','hide');}

追问

不行呀，我鼠标移过去不现实下拉菜单了都，怎么回事啊，我都愁死了

追答

你是什么浏览器哦……下面给你写了个小例子，你把它翻译成js就可以了……我现在在上班，没太多时间给你翻译，呵呵

<html>
<head>
<meta charset="UTF-8">
<title>爬山虎欢迎您</title>
<script>
function ddd(sTyle) { 
 var oDiv1 = document.getElementById('div11');  
 if (sTyle=='show') {   
  oDiv1.style.display = 'block'; 
 }  
 if (sTyle=='hide') {   
  oDiv1.style.display = 'none';  
 }
}
</script>
</head>
<body>
 <div id="div1">
  <a href="#" onmouseover="ddd('show')">显示隐藏</a>
  <div style="display:none;" id='div11'>
   <a href="#">测试1</a> <a href="#">测试2</a>
  </div> 
 </div>
 <div onmouseover="ddd('hide')">
 这里是内容部分
 </div>
</body>
</html>

已赞过 已踩过<

评论收起

百度网友177257b46
2013-08-14 · TA获得超过803个赞

知道小有建树答主

回答量：427

采纳率：100%

帮助的人：340万

我也去答题访问个人页

关注

展开全部

哥们儿这叫事件并非属性那么简单所以 a1.onmouseover = function(){ddd('a101', 'a102', 'show')};
如果想科技含量高一些如下：
a1.attachEvent("onmouseover", function(){ddd('a101', 'a102', 'show'});
如果不是IE a1.addEventListener("mouseover", function(){ddd('a101', 'a102', 'show'});兼容性问题判断一下咯

更多追问追答

追问

添加你写的这两句就可以了吗？

追答

应该是把你a1.setAttribute("onmouseover","ddd('a101','a102','show')");这种写法 换过来
我并没有写完全 只是给出写法 你自己套用一下吧

已赞过 已踩过<

评论收起

baudwang
2013-08-14

知道答主

回答量：71

采纳率：0%

帮助的人：25万

我也去答题访问个人页

关注

展开全部

不支持setAttribute这个函数的你试试a1.onmouseover=function(){执行你想要的}
a1.onmouseout=function(){执行你想要的}

追问

额，我以前就是试了你说的这个它不支持，然后我才用的setAttribute这个函数

已赞过 已踩过<

评论收起

陪你丶看日落
2013-08-14 · TA获得超过668个赞

知道小有建树答主

回答量：436

采纳率：46%

帮助的人：93.2万

我也去答题访问个人页

关注

展开全部

你要在下拉菜单上也加上onmouseover和onmouseout事件就可以了

追问

不行呀哥们，一点反应也没有

已赞过 已踩过<

评论收起

更多回答（3）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

懂js的大神帮忙修改一下，鼠标移过事件有问题

其他类似问题

为你推荐：