高分求解div中的表单问题
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function $(id){
return(document.getElementById(id));
}
function show(){
var content = " ";
content += " <br /> <form action = '1.asp ' method= 'post '> ";
content += " <select name= 'month ' type=\ "text\ "> ";
for (var i =1;i <=12;i++ )
{
content += " <option value= "+i+ "> "+i+ " </option> "
}
content += " </select> 月 ";
content += " <input type= 'submit ' value= 'go '> ";
content += " </form> ";
$( "a1 ").innerHTML = content;
$( "a1 ").style.display= "inline ";
}
function hidden(){
$( "a1 ").style.display= "none ";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div style= "position:relative ">
<div onmouseover= "show(); " onmouseout= "hidden(); "> 把鼠标移上来 </div>
<div style= "position:absolute;background-color:#F2F6FB;width:210px;font-size:12px;border:1px #ccc solid;top:15px;left:0px;display:none; " id= "a1 " onmouseover= "show(); " onmouseout= "hidden(); "> </div>
</div>
</BODY>
</HTML>
大家可以运行下上面的代码.
我的问题是，当鼠标移到表单元素上时 al这个层不显示了。
搞了好久都没搞出来。望js或div高手解答！！
[解决办法]
<HTML>
<HEAD>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312; " />
<style>
.cssMenuBar{border:2 outset menu; background:menu; width:200; heigth:50; font-size:10pt;}
.cssMenuContent{position:absolute; width:200; height:50; z-index:1; border:2 outset menu; background:menu; visibility:hidden; }
</style>
</HEAD>
<BODY>
<div Id= "Menu " onMouseOver= "MenuShow() " onMouseOut= "MenuHidden() ">
<div Id= "MenuBar " class= "cssMenuBar " > 放我上面 </div>
<div Id= "MenuContent " class= "cssMenuContent ">
<table>
<Form method= "post " action= "1.asp "> <tr>
<td> <select> <option> 111 </opton> <option> 222 </opton> </select> </td>
<td> <input type= "submit " value= "提交 "> </td> </tr>
</form>
</table>
</div>
efafefasdfasdfasdfasdfasdfasdf
</BODY>
<SCRIPT LANGUAGE= "vbscript ">
Option Explicit
Sub MenuShow()
MenuContent.style.PixelLeft=Menu.OffsetLeft+10
MenuContent.style.PixelTop=Menu.OffsetTop+10
MenuContent.style.visibility= "visible "
End Sub
Sub MenuHidden()
Dim oTo,oSrc
Set oTo=Window.event.toElement
If oTo Is Nothing Then Exit Sub
Do While oTo.tagName <> "HTML "
If oTo.tagName= "DIV " Then If oTo.ID= "Menu " Then Exit Do
Set oTo=oTo.ParentElement
Loop
If oTo.tagName <> "HTML " Then Exit Sub
MenuContent.style.visibility= "hidden "
End Sub
</SCRIPT>
</HTML>
[解决办法]
用这个试下,我测试成功了.
<script language= "JavaScript ">
<!--
function $(id){
return(document.getElementById(id));
}
function MenuShow(){
$( "MenuContent ").style.left=20;
$( "MenuContent ").style.top=20;
$( "MenuContent ").style.visibility= "visible ";
}
function MenuHidden(){
var oTo,oSrc;
oTo=window.event.toElement;
if (oTo==null){
return;
}
do{
if(oTo.tagName== "DIV "){
oTo.ID= "Menu ";
break;
}
oTo=oTo.parentElement;
}while(oTo.tagName!= "HTML ");
if(oTo.tagName!= "HTML ") return;
$( "MenuContent ").style.visibility= "hidden ";
}
//-->
</script>
