html鼠标经过自动展开和点击展开代码。

如题~~类似于下面的代码,
需要的是
①不用点击,鼠标经过后自动展开的代码,鼠标移开后展开不用收起来。
②点击后展开。

下面的代码是三条,麻烦帮我改成一条,谢谢。
本人完全不明白HTML代码,所以麻烦帮我改成直接可以用的代码,谢谢

<a href="#">
<div id="main1" style="color:blue"
onclick="document.all.child1.style.display='none';document.all.child2.style.
display='none';document.all.child3.style.display='none';document.all.child1.style.
display=(document.all.child1.style.display=='none')?'':'none'">☆就业方向:
</div></a>
<div id="child1" style="display:none;">
<p>web开发、java程序开发</p>
</div>

<a href="#">
<div id="main2" style="color:blue"
onclick="document.all.child1.style.display='none';document.all.child2.style.
display='none';document.all.child3.style.display='none';document.all.child2.style.
display=(document.all.child2.style.display=='none')?'':'none'">☆专业技能:
</div></a>
<div id="child2" style="display:none;">
<p>*熟练掌握html,xml,css,javascript等技术.</p>
<p>*熟练掌握jsp,servlet,jdbc等相关技术,java语言基础扎实。</p>
<p>*熟悉mysql,sql server,oracle等数据库开发。</p>
<p>*熟悉tomcat应用服务器的使用。</p>
<p>*对struts,spring,hibernate等开源框架有所了解.</p>
<p>*了解c语言,vb程序设计,汇编语言</p>
<p>*熟练使用开发工具eclipse</p>
</div>
</div>

<a href="#">
<div id="main3" style="color:blue"
onclick="document.all.child1.style.display='none';document.all.child3.style.
display='none';document.all.child3.style.display='none';document.all.child3.style.
display=(document.all.child3.style.display=='none')?'':'none'">☆实践经验:
</div></a>
<div id="child3" style="display:none;">
<p>*2005年11月毕业设计:开发药品管理系统,包括管理药品的进库、修改、出库、出库
历史、库存查看等功能,使用struts+hibernate+mysql开发,在应用前端用struts,用
户通过web浏览器进行访问,使用hibernate把对象模型映射到数据库.</p>
<p>*2005年6月独立开发本人的个人主页,具有文章分类显示功能,后台动态管理功能,
在后台动态发布文章、修改文章、删除文章功能,使用jsp+servlet+javabean+mysql
模型开发,jsp只要是用于前台显示,servlet只要用于转发,是整个系统的中心,
javabean主要用于与后台数据库打交道</p>
<p>*2005年10月参加学校的网店设计策划大赛(主要是静态页面设计和图片动画设计)</p>
</div>
</div>

1.创建一个新的HTML文件百,该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。

2.在页面上写nav标签,放入三个超链接(首页,第一栏,第二栏),代码如下。

3.运行代码,效果如下。

4.使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。

5.运行代码,效果如下:可见,经过CSS样式美化,当鼠标经过时,显示蓝色。

6.使用CSS代码,实现鼠标在上面显示下划线效果,代码如下。

7.在浏览器中运行代码以达到预期的效果。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2011-04-09
是在动画播放时,浏览者用鼠标或键盘对动画的播放进行控制的性能。这些控制大多由按钮来完成,本章将叙述按钮外观的制作及一些常用控制语句的使用。

认识按钮的帧结构

按Ctrl+F8键创建新元件,在对话框中选择“按钮”,如下图所示。

输入元件名称后,按“确定”即进入按钮编辑区。按钮编辑区和其他场景不同,时间轴中没有了那么多帧,只有4个方框,分别表示4个“帧”,如下图所示。这就是说按钮只能有4个帧。按钮不是动画,只是控制动画动作的,用1帧也能起到它应有的作用,使用4帧是为了使按钮更加活泼。

按钮的4帧分别为弹起、指针经过、按下和点击。从图中可以看出,初始只有第1帧(弹起)里有一个小圆点,这是系统默认的“关键帧”,另外3帧都不是关键帧。如果不考虑按钮的活泼趣味,在第1帧任意画个图形就成了一个按钮。把这个按钮导入到主场景中后,加上相应的控制语句就可完成控制作用。不过这样简单制作的按钮看起来很呆板。

为了让按钮更有生气,在第2帧、第3帧也加上关键帧。添加关键帧的方法还是按[F6]键。在第2帧和第3帧分别绘制不同的图形,在操作按钮时,鼠标指针移动到按钮上,按钮变成第2帧中的图形,所以第2帧叫做“指针经过”。当按下鼠标键的时候,按钮变成第3帧中的图形,第3帧叫做“按下”。当鼠标指针离开按钮并弹起按键时,按钮又恢复到第1帧中的图形,第1帧叫做“弹起”。下面试做一个变色按钮。
(1)按Ctrl+F8键建立元件,行为选择“按钮”,名称输入“按钮1”,按“确定”进入按钮编辑区。在坐标原点画一个红色圆形。
(2)按两次F6键添加两个关键帧(指针经过和按下都加上关键帧)。选择“指针经过”帧,选中圆,选择填充色为绿色。选择“按下”帧,选中圆,选择填充色为蓝色。
(3)按Ctrl+E键返回主场景,从元件库把“按钮1”拖放到工作区。按Ctrl+Enter键预览,鼠标指针移动到红色按钮上时,按钮就变成绿色;按下鼠标键,按钮就变成蓝色;松开鼠标键按钮变成绿色,移开鼠标指针后,按钮又恢复红色。通过这个试验就很好理解3个关键帧的作用了。

时间轴的第4帧名叫做“点击”,它是规定按钮检测鼠标范围的。前面试验中都没有使用它,不使用第4帧时,按钮的范围就是第1帧绘制的图形。但是有些情况下,检测鼠标的范围太小,鼠标很不容易点击按钮,就要用到第4帧来解决这个问题了。
如下图所示的一个空心圆圈和两条竖线当做按钮,鼠标指针指向圆内时,如图②所示,按钮并不能检测到鼠标。因为按钮是由线组成的,必须对准线的位置如图③所示才检测到鼠标,这样操作者就感到很不方便。
在按钮的第4帧(点击)插入关键帧,画一个实心的圆如图④所示,当鼠标指针移动到这个圆内,按钮就检测到鼠标了。这个圆只起检测作用,在动画播放时并不显示。

有时需要用到隐藏的按钮,就是在播放时不显示,鼠标移动到该处,单击就起按钮作用。这样的按钮只在第4帧(点击)画图形,其余帧都空白,按钮在播放时就看不到了,因为第4帧中的内容是不显示的。我们在打台球中的按钮就是这样。

用按钮控制播放

前面讲的只是制作按钮方法,若要按钮控制影片播放,还得给按钮加上控制语句才行。控制语句叫做“脚本”,也叫做“代码”。这一节主要学习按钮脚本的输入方法,可以把上一节做的有声音动画源文件打开,添加控制按钮。
(1)制作“播放”按钮(做法略),用文本工具在按钮输入“播放”。 制作“暂停”按钮,在按钮输入“暂停”。
(2) 返回主场景。将两个按钮导入,放在合适位置。
(3) 选中“播放”按钮,按F9键打开“动作”面板,如图所示。

动作面板在默认状态下放置在屏幕下边。如果没有关闭该面板,用鼠标单击名称行就展开了。关闭后可用快捷键[F9]打开。如果打开后面板不是如上图的样子,可能是处于“专家模式”状态,专家模式的使用以后再讲,初接触动作面板,最好使用“标准模式”操作。单击动作面板右上角的菜单按钮,拉开动作面板菜单,其中有“标准模式”和“专家模式”可选择。

动作面板可分为3部分:脚本工具箱、参数区和代码区,如图所示。面板左边框中存储着可供选择的动作脚本,叫做“脚本工具箱”。代码分为多种类型,每种类型的代码放在一个目录里,是目录标记。单击一个目录,标记变成形状,这是展开标记。目录里的内容展开后,如果里面还有目录的话,是大类里又化分小类,再展开小类,才能出现控制代码。双击某一个代码,这个代码就会添加到右边代码区中,就是输入了代码。代码区中选中某一行代码,参数区中就出现该代码的可选参数项。
(3)展开“动作→影片控制”,双击“play”项,代码区中出现了“on(release)”。该语句意思是鼠标单击后执行播放命令。
(4)选择“暂停”按钮,展开“动作→影片控制”,双击“stop”项,右边代码区中出现“on(release)”语句。
(5)按Ctrl+Enter预演,播放动画时,用鼠标单击“暂停”按钮,声音就停止,单击“播放”按钮,声音又播放起来。
下面将按钮代码参数区中内容解释一下:
按钮代码分两行放在代码区中,下行“play()”是动作,上行“on(release)”是在什么情况下执行动作的描述。“release”是指鼠标单击后“释放”。要执行动作不只有“点击释放”一种方法,要选择其他方法,在代码区点击“on(release)”代码,参数区就出现8项事件选择项,如上图中参数区所示。在某项前的方框中打“勾”,就是选择了某项。下面分别叙述参数区中8个选项的含义。
※按(P):鼠标按下按钮时执行。
※滑过(V):指针指向按钮时执行。
※释放(R):鼠标单击按钮并放开后执行。
※滑离(U):不按鼠标,让指针经过按钮再离开后执行。
※外部释放(O):鼠标按下按钮不放,移动到按钮以外再放开时执行。
※拖过(D):鼠标按下按钮不放,移出按钮外再回到按钮上执行。
※拖离(T):鼠标按下按钮不放离开按钮时执行。
※按键(K):选择该项可用键盘触发动作。选择后,“按键”二字右边键值框就被激活,在键盘上按下一个键,该键就被记录在键值框中,以后控制按钮时,按该键就相当鼠标单击的功能。

2004版没有参数区,参数要用户自己输入
以上选项中,常用的是“释放、滑过、按键”这3项。

理解了上面各项的意义,可以试试各选项的控制方式。选中播放按钮,打开动作面板,在代码区中把光标定位在第1行。在参数区中把“释放”项单击一下,方块中的“勾”消失了,在“滑过”项单击一下,“滑过”项前面打“勾”,该操作称做“选择滑过”。原来代码区中的“on(release)语句变成了“on(rollOver)。“暂停”按钮也选择“滑过”项,代码变成了“on(rollOver)”。再次预览,只要将鼠标指针移动到“暂停”按钮上,声音就停止,鼠标指针移动到“播放”按钮,声音又播放起来了。

试用键盘控制。选择“播放”按钮,打开动作面板,参数区中选择“按键”项,会发现“按键”右边键值框变亮,在按键盘上按A键,键值框出现“a”字样,表示记录了键值。选择“暂停”按钮,参数区中选择“按键”项,在键盘上按空格键,键值框中出现字样。导出影片,可以用空格键暂停,按A键播放。

控制帧转向

上面例子只是控制播放与停止,播放和停止的位置并不确定。如果我们要想在文件打开时就停止在某一帧,点击按钮后要跳到指定位帧数,用“goto”命令,就是去到某一帧播放或停止。

下面我们试验一个导入声音一开始不播放,点缶按钮后再开始播放的例子。要让一开始不播放,我们要在开始帧(第一帧)输入“帧代码”。选择第一“帧”,打开动作面板,如下图:

首先请注意一下动作面板最上行深色条中的字“动作-帧”,这与输入按钮代码时是不一样的,输入按钮代码时深色条中的字是“动作-按钮”。该面板名字是与你当前选中对象所决定的,要输入帧动作必需选中“帧”,要输入按钮动作必先选中“按钮”,否则会造成输入代码错误。把帧动作输入到按钮中或把按钮动作输入到帧,是初学者常犯的错误。

在如上图帧动作面板中,双击左边的“stop”,右边代码框中出现 stop(); 这与上述输入按钮代码时不同,输入按钮代码时,双击“stop”,右边代码框中自动添加 on(release)事件,输入“stop”停止命令,不需要事件角触发,参数区里也提示“没有参数”,因为帧动作是不需要操作的,只要播放到该帧,就执行该帧中的命令。帧动作代码输入完成后,在该帧中有一个小 a 字标记。

注意:帧代码只能输入到关键帧上

上面我们让停止在第一帧,为了让开始不播放声音,我们在第二帧插入关键帧,导入声音,在按钮上输入按钮动作,让跳到第二帧播放。选中按钮,打开按钮动作面板, 在左边双击“goto”,右边代码框中自动出现:
on(release){
gotoandplay(1);
}
在右边上部参数区中把“帧”后面框中的1改为2,如

参考资料有图文解说
第2个回答  推荐于2018-02-26
<a href="#" onMouseOver="show(0)">
<div style="color:blue">☆就业方向:</div>
</a>
<div id="child1" style="display:none;">
<p>web开发、java程序开发</p>
</div>
<a href="#" onMouseOver="show(1)">
<div style="color:blue">☆专业技能: </div>
</a>
<div id="child2" style="display:none;">
<p>*熟练掌握html,xml,css,javascript等技术.</p>
<p>*熟练掌握jsp,servlet,jdbc等相关技术,java语言基础扎实。</p>
<p>*熟悉mysql,sql server,oracle等数据库开发。</p>
<p>*熟悉tomcat应用服务器的使用。</p>
<p>*对struts,spring,hibernate等开源框架有所了解.</p>
<p>*了解c语言,vb程序设计,汇编语言</p>
<p>*熟练使用开发工具eclipse</p>
</div>

<a href="#" onMouseOver="show(2)">
<div style="color:blue" >☆实践经验: </div>
</a>
<div id="child3" style="display:none;">
<p>*2005年11月毕业设计:开发药品管理系统,包括管理药品的进库、修改、出库、出库
历史、库存查看等功能,使用struts+hibernate+mysql开发,在应用前端用struts,用
户通过web浏览器进行访问,使用hibernate把对象模型映射到数据库.</p>
<p>*2005年6月独立开发本人的个人主页,具有文章分类显示功能,后台动态管理功能,
在后台动态发布文章、修改文章、删除文章功能,使用jsp+servlet+javabean+mysql
模型开发,jsp只要是用于前台显示,servlet只要用于转发,是整个系统的中心,
javabean主要用于与后台数据库打交道</p>
<p>*2005年10月参加学校的网店设计策划大赛(主要是静态页面设计和图片动画设计)</p>
</div>
<script language="javascript">
function show(id)
{
var div= ["child1","child2","child3"]
for(i=0;i<3;i++)
{
document.getElementById(div[i]).style.display=(i==id?"block":"none")
}
}

</script>本回答被网友采纳
第3个回答  2015-12-05
利用的jquery的toggle函数就可以实现。
1、在html中引入jquery.js。
2、例子:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(true);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p style="display:none">This is another paragraph.</p>
<p>把 switch 参数设置为 false,可以隐藏所有段落。</p>
<button class="btn1">显示所有 p 元素</button>
</body>
</html>
toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
该方法也可用于切换被选元素的 hide() 与 show() 方法。
第4个回答  2011-04-08
用jquery的hover方法吧追问

不好意思,我对HTML完全不明白,能麻烦帮我改下代码或是给我一个类似的例子吗,谢谢

追答


☆就业方向:

web开发、java程序开发

☆专业技能:

*熟练掌握html,xml,css,javascript等技术.

*熟练掌握jsp,servlet,jdbc等相关技术,java语言基础扎实。

*熟悉mysql,sql server,oracle等数据库开发。

*熟悉tomcat应用服务器的使用。

*对struts,spring,hibernate等开源框架有所了解.

*了解c语言,vb程序设计,汇编语言

*熟练使用开发工具eclipse

☆实践经验:

*2005年11月毕业设计:开发药品管理系统,包括管理药品的进库、修改、出库、出库
历史、库存查看等功能,使用struts+hibernate+mysql开发,在应用前端用struts,用
户通过web浏览器进行访问,使用hibernate把对象模型映射到数据库.

*2005年6月独立开发本人的个人主页,具有文章分类显示功能,后台动态管理功能,
在后台动态发布文章、修改文章、删除文章功能,使用jsp+servlet+javabean+mysql
模型开发,jsp只要是用于前台显示,servlet只要用于转发,是整个系统的中心,
javabean主要用于与后台数据库打交道

*2005年10月参加学校的网店设计策划大赛(主要是静态页面设计和图片动画设计)

function show(id)
{
var div= ["child1","child2","child3"]
for(i=0;i

给分吧

本回答被提问者采纳
相似回答