//当鼠标经过menuitem则将背景色改为黄色 function mouseOverHandler(e){ var itmName=e.target.name; if(itmName.indexOf("menuitem")!=-1){ document.layers[itmName].bgColor="yellow"; document.layers[itmName].document.bgColor="yellow"; } }
//当鼠标离开menuitem则将背景颜色改为原来的灰色 function mouseOutHandler(e){ var itmName=e.target.name; if(itmName.indexOf("menuitem")!=-1){ document.layers[itmName].bgColor="gray"; document.layers[itmName].document.bgColor="gray"; } }
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE TYPE="text/css" TITLE="">
<!--
A{text-decoration:none;font-weight:bold;color:white}
#menu{ /*装载菜单的层的样式*/
position:absolute;
visibility:visialbe;
width:100px;
border:2 solid #3399ff;
text-align:center;
background:#3399ff;
z-index:100;
}
.menuItem{ /*菜单项目的一般样式*/
position:relative;
width:100%;
font:bold 10pt;
line-height:1.3em;
color:#ffffff;
}
.highLightMenu{ /*鼠标在菜单项时高亮显示菜单项目的样式*/
font:bold 10pt;
line-height:1.3em;
color:#3399ff;
background:white;
}
-->
</STYLE>
</HEAD><body>
<div id="menu" onmouseover=overMenu(event) onmouseout=outMenu(event)>
<A HREF="javascript:;"><div id="index" class="menuItem">首页</div></A>
<A HREF="javascript:;"><div id="about" class="menuItem">关于</div></A>
<A HREF="javascript:;"><div id="test" class="menuItem">试试</div></A>
<A HREF="javascript:;"><div id="message" class="menuItem">留言</div></A>
<A HREF="javascript:;"><div id="sibling" class="menuItem">相关</div></A>
</div>
<script language="JavaScript">
<!--function overMenu(e){ //鼠标进入菜单项目时改变该项目的样式
var elm = (document.all)?(e.srcElement):(e.target);
if(elm.className=="menuItem")
elm.className="highLightMenu";
}function outMenu(e){ //鼠标离开菜单项目时改变该项目的样式
var elm = (document.all)?(e.srcElement):(e.target);
if(elm.className=="highLightMenu")
elm.className="menuItem";
}
//-->
</script>
</BODY></HTML>关键是mouseout和mouseover事件很难同时捕获。可能和ns的事件触发机制有关。不知ns7下面如何。等下班了再看看
你给的页面访问不了,可以帖上来吗?
<!--
A{text-decoration:none;font-weight:bold;color:white;}
A:hover{color:#3399ff;background:white;}
#menu{ /*装载菜单的层的样式*/
position:absolute;
visibility:visialbe;
border:2 solid #3399ff;
text-align:center;
background:#3399ff;
z-index:100;
}
-->
</STYLE>
<div id="menu">
<div id="index"><A HREF="javascript:;"> 首页 </A></div>
<div id="about"><A HREF="javascript:;"> 关于 </A></div>
<div id="test"><A HREF="javascript:;"> 试试 </A></div>
<div id="message"><A HREF="javascript:;"> 留言 </A></div>
<div id="sibling"><A HREF="javascript:;"> 相关 </A></div>
</div>
-moz-opacity:0.8;IE中:
filter:alpha(Opacity=80, Finishopacity=0, Style=1, StartX=0, FinishX=0, StartY=0, FinishY=0);
<head>
</head>
<body>
<layer id="menu" bgcolor="gray" left=50 top=50 width=200 height=20>
<center>menu</center>
</layer>
<layer id="menuitem1" bgcolor="gray"
left=50 top=70 width=200 height=20 visibility=hidden>
<center>menu_item1</center>
</layer>
<layer id="menuitem2" bgcolor="gray"
left=50 top=90 width=200 height=20 visibility=hidden>
<center>menu_item2</center>
</layer>
<layer id="menuitem3" bgcolor="gray"
left=50 top=110 width=200 height=20 visibility=hidden>
<center>menu_item3</center>
</layer>
<layer id="menuitem4" bgcolor="gray"
left=50 top=130 width=200 height=20 visibility=hidden>
<center>menu_item4</center>
</layer>
<layer id="menuitem5" bgcolor="gray"
left=50 top=150 width=200 height=20 visibility=hidden>
<center>menu_item5</center>
</layer>
</body>
</html>
<script>
function mouseUpHandler(e){
var itmName=e.target.name;
if(itmName=="menu"){
//如果来源对象是menu就显示menuitem菜单
for(var len=1; len<document.layers.length; len++){
document.layers[len].visibility="visible";
}
return;
}else{
//如果来源对象不是menuitem就隐藏menuitem菜单
for(var len=1; len<document.layers.length; len++)
document.layers[len].visibility="hidden";
if(itmName.indexOf("menuitem")!=-1){
//在此根据选项进行处理
alert( "你选择了"+itmName);
}
}
}
//当鼠标经过menuitem则将背景色改为黄色
function mouseOverHandler(e){
var itmName=e.target.name;
if(itmName.indexOf("menuitem")!=-1){
document.layers[itmName].bgColor="yellow";
document.layers[itmName].document.bgColor="yellow";
}
}
//当鼠标离开menuitem则将背景颜色改为原来的灰色
function mouseOutHandler(e){
var itmName=e.target.name;
if(itmName.indexOf("menuitem")!=-1){
document.layers[itmName].bgColor="gray";
document.layers[itmName].document.bgColor="gray";
}
}
//为document及所有的layer命名
document.name="document";
document.menu.document.name="menu";
for(var len=1; len<document.layers.length; len++)
document.layers[len].document.name="menuitem"+len;
//在document抓取MOUSEUP,MOUSEOVER,MOUSEOUT和MOUSEMOVE事件
document.captureEvents(
Event.MOUSEUP|Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEMOVE);
document.onmouseup=mouseUpHandler;
document.onmouseover=mouseOverHandler;
document.onmouseout=mouseOutHandler;
//取消mousemove的预设动作
document.onmousemove=function(e){
return false;
}
</script>