js脚本(鼠标移到一个层上触发另1个隐藏的层)
鼠标移到一个层上显示出另1个隐藏的层,第一个层的颜色要改变,鼠标拿走的时候,第一个层的颜色恢复为原始颜色,另一层从显示恢复为隐藏别给我粘一堆没用的链接来,知道的朋友帮忙写...
鼠标移到 一个层上 显示出另1个隐藏的层,第一个层的颜色要改变,
鼠标拿走的时候,第一个层的颜色恢复为原始颜色,另一层从显示 恢复为隐藏
别给我粘一堆没用的链接来,知道的朋友帮忙写一个html粘上代码,谢谢了
就2个层
<div id="Layer1">123</div>
<div id="Layer2">啊</div>
最开始"Layer2"层是隐藏的(visibility: hidden;),鼠标 onmouseover 到 "Layer1"层 的时候,把"Layer2"层显示出来,并且把"Layer1"层的颜色从红色改成白色,把 123 从黑色 变成蓝色;
当 鼠标 onmouseout "Layer1"层的 的时候,把 "Layer2"层给隐藏起来,并且把 "Layer1"层的颜色改回最初的红色,123从 蓝色 变成 最初的黑色 展开
鼠标拿走的时候,第一个层的颜色恢复为原始颜色,另一层从显示 恢复为隐藏
别给我粘一堆没用的链接来,知道的朋友帮忙写一个html粘上代码,谢谢了
就2个层
<div id="Layer1">123</div>
<div id="Layer2">啊</div>
最开始"Layer2"层是隐藏的(visibility: hidden;),鼠标 onmouseover 到 "Layer1"层 的时候,把"Layer2"层显示出来,并且把"Layer1"层的颜色从红色改成白色,把 123 从黑色 变成蓝色;
当 鼠标 onmouseout "Layer1"层的 的时候,把 "Layer2"层给隐藏起来,并且把 "Layer1"层的颜色改回最初的红色,123从 蓝色 变成 最初的黑色 展开
展开全部
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>横向菜单</TITLE>
<STYLE type="text/css">
td {FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;}
div{/*设置层背景样式*/
background-color:#669933;
text-align:center;position:absolute;z-index:2;display:none; }
A {FONT-SIZE: 13px; COLOR: #FFFFFF; TEXT-DECORATION: none;
/*文字链接的背影样式*/
background-color:#669933;
width:100px;line-height:22px;text-align:center;border-bottom:1 #FFFFFF solid;}
A:hover {FONT-SIZE: 13px; COLOR: #ffffff;
/*鼠标在文字链接上时的文字背景样式*/
background-color:#FE9D01;
width:100px;line-height:22px;text-align:center;}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1){
document.getElementById(d1).style.display='block'; //显示层
}
function hide(d1){
document.getElementById(d1).style.display='none'; //隐藏层
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="303" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD><A href="#" onMouseMove="show(1)" onMouseOut="hide(1)">手机数码</A></TD>
<TD><A href="#" onMouseMove="show(2)" onMouseOut="hide(2)">淘宝集市</A></TD>
<TD><A href="#" onMouseMove="show(3)" onMouseOut="hide(3)">品牌商城</A></TD>
</TR>
<TR>
<TD><DIV id="1" onMouseMove="show(1)" onMouseOut="hide(1)"><A href="#">手机数码1</A><BR><A href="#">手机数码2</A><BR><A href="#">手机数码3</A></DIV></TD>
<TD><DIV id="2" onMouseMove="show(2)" onMouseOut="hide(2)"><A href="#">淘宝集市1</A><BR><A href="#">淘宝集市2</A><BR><A href="#">淘宝集市3</A></DIV></TD>
<TD><DIV id="3" onMouseMove="show(3)" onMouseOut="hide(3)"><A href="#">品牌商城1</A><BR><A href="#">品牌商城2</A><BR><A href="#">品牌商城3</A></DIV></TD>
</TR></TABLE>
</BODY>
</HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>横向菜单</TITLE>
<STYLE type="text/css">
td {FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;}
div{/*设置层背景样式*/
background-color:#669933;
text-align:center;position:absolute;z-index:2;display:none; }
A {FONT-SIZE: 13px; COLOR: #FFFFFF; TEXT-DECORATION: none;
/*文字链接的背影样式*/
background-color:#669933;
width:100px;line-height:22px;text-align:center;border-bottom:1 #FFFFFF solid;}
A:hover {FONT-SIZE: 13px; COLOR: #ffffff;
/*鼠标在文字链接上时的文字背景样式*/
background-color:#FE9D01;
width:100px;line-height:22px;text-align:center;}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1){
document.getElementById(d1).style.display='block'; //显示层
}
function hide(d1){
document.getElementById(d1).style.display='none'; //隐藏层
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="303" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD><A href="#" onMouseMove="show(1)" onMouseOut="hide(1)">手机数码</A></TD>
<TD><A href="#" onMouseMove="show(2)" onMouseOut="hide(2)">淘宝集市</A></TD>
<TD><A href="#" onMouseMove="show(3)" onMouseOut="hide(3)">品牌商城</A></TD>
</TR>
<TR>
<TD><DIV id="1" onMouseMove="show(1)" onMouseOut="hide(1)"><A href="#">手机数码1</A><BR><A href="#">手机数码2</A><BR><A href="#">手机数码3</A></DIV></TD>
<TD><DIV id="2" onMouseMove="show(2)" onMouseOut="hide(2)"><A href="#">淘宝集市1</A><BR><A href="#">淘宝集市2</A><BR><A href="#">淘宝集市3</A></DIV></TD>
<TD><DIV id="3" onMouseMove="show(3)" onMouseOut="hide(3)"><A href="#">品牌商城1</A><BR><A href="#">品牌商城2</A><BR><A href="#">品牌商城3</A></DIV></TD>
</TR></TABLE>
</BODY>
</HTML>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |