js脚本(鼠标移到一个层上触发另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>
<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>
温馨提示:内容为网友见解,仅供参考
无其他回答

怎样用js实现鼠标悬停一个div,让另一个div用指定的样
使用JavaScript实现鼠标悬停效果,通过`addEventListener`监听事件并操作样式。先利用`document.querySelector`获取目标元素和要改变样式的元素。`addEventListener`用于监听目标元素的鼠标悬停和离开事件,通过`classList`添加或移除指定样式类。在CSS中预先定义样式类`hover-style`,便于JavaScript调用以实现悬停效果。

js css 鼠标移入某个区域滑出一个框的效果怎么做?
1、输入代码,其中button是鼠标要滑动的地方,滑过button时,class为content的内容就要显示出来,鼠标滑出去的时候,这块内容就需要重新隐藏起来。2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。4、...

js怎么做鼠标移过去会显示隐藏的内容
步骤:1、构造好页面内容;2、在css中设置一个隐藏类hide,类的样式为display:none;设置显示类show,样式为display:block;3、给需要隐藏的内容设置类名为hide,这样就隐藏了控件 4、在js标签中,通过控件的类名或者id获取到隐藏对象obhide以及需要监控的对象ob2,再对ob2对象设置onmouseover方法,在...

JQuery 鼠标移到一个层上显示另一个层问题
第一个问题解决思路:每个一级菜单设置hover事件没有问题,但是你的代码中显示的二级菜单却成为了全局所有的了,所以需要修改为当前一级菜单下面的$(".subCategory")元素,即 $(一级菜单).find(".subCategory")--->>> 这样才会显示为当前一级菜单下的二级菜单。第二个问题解决思路:由于hover事件中...

关于js的鼠标移入移出事件
在处理鼠标移出效果时,若遇到嵌套div结构的问题,即鼠标似乎误触发了移出事件,可以通过以下方法解决:当存在多层div嵌套时,直接使用onmouseover和onmouseout可能频繁触发事件。为避免误触发,推荐使用onmouseenter和onmouseleave。这两组事件的区别在于:mouseover与mouseenter:鼠标移动至被选元素或其子元素时,...

css 鼠标经过一个a让另一个DIV从隐藏变为显示求解、
1、给鼠标经过的DIV添加一个类 ,类名为submeau;如下图:2、给显示或者隐藏的DIV,添加一个ID,ID名为:id="oa_submeau",如下图:3、将以下的JQUERY代码放在整个网页的最底部,用于控制鼠标经过显示DIV,离开隐藏DIV。 ("#oa_submeau").hide();(".submeau").hover(function () { ("#o...

js点击指定位置获取值,点击其他位置隐藏层
我也是刚处理过这个问题 我只能给你个思路 设置一个变量用来标识鼠标有没有离开你的弹出层的div(可以用div的mouseover事件来控制这个变量)如果离开div 触发文本框的blur事件 如果没离开div 不触发blur 跟单件模式差不多的思想 具体代码我就不给你了 希望对你有帮助 ...

js css 鼠标移入某个区域滑出一个框的效果怎么做?
实现原理:刚开始框就存在了,只不过透明度为全透明,鼠标移入后透明度不透明就显示出来了,框稍微动画一些的话就用到css3的旋转之类的了。如下图 <!doctype html>css3练习#bt{width:100%; height:50px; font-size:20px; background:#06F; color:#fff; text-align:center; line-height:50px...

鼠标悬停div改变另一个div样式,怎么写?两个div是分开的【如图】
当鼠标放到div上,获取另一个div的class改变样式就行了,js和css都可以实现,很简答的,比如第一个div class叫h,要改变叫d,那么久是 css:.h:hover .d{background:#ff6a00;} jq:(".h").hover(function () { (".d").css("background", "#ff6a00");});...

在HTML里,当我鼠标移到一个div里 就显示一个隐藏的子div 并且鼠标移到...
一个父div,里面嵌一个子div。开始的时候将子div隐藏,即:子div.syle.display="none";在父div添加onmouseover事件处理,将子div.style.display改成block。对document.body添加onmousemove事件,通过event.clientX和event.clientY来获取鼠标的位置,然后更新子div的位置为鼠标的位置。

相似回答