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

求鼠标经过时，自动展开子菜单的代码 javascript~

首先a是内联标签，不适合做容器,帮你改了下:





无标题文档

*{margin:0; padding:0;}
ul{list-style:none}
#outer{width:60px; height:28px; position:relative; line-height:28px; text-align:center; font-size:12px; background-color:#999; cursor:pointer}
#outer ul{position:absolute; left:0; top:28px; width:60px; background-color:#666666; display:none}




实现原理：外围一个容器，相对定位；内部一个列表，绝对定位；当鼠标移过外围容器时候，列表显示；移动出时候，列表隐藏。

我的收藏

电影
游戏
音乐
图书





function menu(){//声明函数
var outer=document.getElementById("outer");//定义“outer”等于外围容器
outer.onmouseover=function(){//当outer鼠标移入时候执行：
this.getElementsByTagName("ul")[0].style.display="block";//this指outer本身；它下面的ul的样式display=block，也就是显示；
}
outer.onmouseout=function(){//当outer鼠标移出时候执行：
this.getElementsByTagName("ul")[0].style.display="none";//this指outer本身；它下面的ul的样式display=none，也就是隐藏；
}
}
menu();//执行函数

给你一个类似的，需要展开的菜单你加一个样式默认隐藏，然后在JS里加一个事件显示就好了





CSS+XHTML代码


/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/page_menu2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.


=================================================================== */
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}
#hoverpage ul#outer li div p {font-size:12px; line-height:16px; margin:5px 0 15px 0;}
#hoverpage ul#outer li div h2 {line-height:1em; color:#585; font-size:1.5em; font-weight:normal; margin-top:0; font-family:verdana, sans-serif;}
#hoverpage ul#outer li div h3 {line-height:1em; color:#66a; font-size:1.2em; font-weight:normal; margin-top:0;}
#hoverpage ul#outer li div h3.clear {clear:left;}


#hoverpage {width:650px; height:450px; border:1px solid #aaa; background:#fff; position:relative; z-index:500; overflow:hidden; text-align:left;}
#hoverpage table {border-collapse:collapse; margin:-1px;}
#hoverpage ul#outer {background:transparent; padding:0; margin:0;list-style:none;}

#hoverpage ul#outer li.page {display:inline;} /* needed for IE to function correctly */

#hoverpage ul#outer li.page a.menuitem {text-decoration:none;}

#hoverpage ul#outer li.page i {position:absolute; display:block; height:25px; right:500px; background:transparent; cursor:default; z-index:100; text-align:right; text-decoration:none; color:#080; font-style:normal; cursor:pointer;}

#hoverpage ul#outer li.p1 i {top:30px;}
#hoverpage ul#outer li.p2 i {top:55px;}
#hoverpage ul#outer li.p3 i {top:80px;}
#hoverpage ul#outer li.p4 i {top:105px;}
#hoverpage ul#outer li.p5 i {top:130px;}


#hoverpage ul#outer li.page div {display:block; width:600px; height:400px; padding:25px; font-weight:normal; color:#444;}
#hoverpage ul#outer li.p1 div {background:#fff url(page1_back.jpg);}
#hoverpage ul#outer li.p2 div {background:#fff url(page2_back.jpg);}
#hoverpage ul#outer li.p3 div {background:#fff url(page3_back.jpg);}
#hoverpage ul#outer li.p4 div {background:#fff url(page4_back.jpg);}
#hoverpage ul#outer li.p5 div {background:#fff url(page5_back.jpg);}

#hoverpage ul#outer li div img {border:1px solid #888; float:right; margin:0 10px 5px 0;}
#hoverpage ul#outer li div p.big {line-height:1em; color:#004; font-size:1.5em;}
#hoverpage ul#outer li div a {color:#00c; text-decoration:underline;}
#hoverpage ul#outer li div em {display:block; width:190px; height:230px; float:left; background:transparent url(current.gif) no-repeat; margin-right:10px;}

#hoverpage ul#outer li.p1 div em {background-position: 21px 0;}
#hoverpage ul#outer li.p2 div em {background-position: 21px 25px;}
#hoverpage ul#outer li.p3 div em {background-position: 21px 50px;}
#hoverpage ul#outer li.p4 div em {background-position: 21px 75px;}
#hoverpage ul#outer li.p5 div em {background-position: 21px 100px;}

#hoverpage ul#outer li.page div a:hover {text-decoration:none;}

#hoverpage ul#outer li.page a:hover {white-space:normal;} /* for IE6 */

#hoverpage ul#outer :hover div {position:absolute; left:0; top:0;}
#hoverpage ul#outer a:hover i {color:#66a; font-weight:bold;} /* for IE6 */
#hoverpage ul#outer :hover a i {color:#66a; font-weight:bold;}

#hoverpage ul#outer div ul li {line-height:20px; font-size:0.9em; color:#256; list-style-type:disc;}
#hoverpage ul#outer div ul li a {line-height:20px; font-size:1.1em; color:#c00;}

#hoverpage ul#outer div dl dd {line-height:20px; font-size:1.1em; color:#448;}
#hoverpage ul#outer div dl dt {line-height:30px; font-size:1.3em; color:#333;}








Products




Products
Lorem Ipsum

Integer nonummy neque.
Aliquam accumsan.
Nulla in sapien eget eros.
Nam varius ante et risus.
Phasellus at erat id metus.
Donec malesuada ultricies.
Duis quis purus sit amet.
Morbi porta dapibus enim.

Product Information
Suspendisse potenti. Donec viverra molestie enim. Fusce fermentum, erat id cursus aliquam, mauris augue volutpat dolor, in interdum purus pede dictum diam. Morbi interdum diam at ligula. Morbi laoreet. Morbi mollis tristique justo. Etiam accumsan fermentum ipsum. Phasellus vestibulum, leo in dapibus ultricies, nisi nulla fermentum tortor, eu lobortis nibh urna ac dui. Aliquam erat volutpat. Curabitur vitae sapien sed libero dictum pellentesque. Praesent quis enim nec tellus congue hendrerit. Ut tellus. Morbi rhoncus elit lobortis libero.




Services




Services
Curabitur eget

Suspendisse potenti.
Quisque at ante nec lacus cursus malesuada.
Donec viverra molestie enim.
Sed ac tortor nec augue hendrerit pulvinar.
Pellentesque habitant.
Nullam rhoncus hendrerit orci.
Vivamus non turpis.
Sed lacinia egestas mi.

Available Services

Proin scelerisque justo quis ante. Maecenas vehicula orci quis arcu. Nam dictum lectus quis ipsum. In felis. Cras eu lectus. Nam sed est ut orci venenatis faucibus. Ut molestie massa non massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur eget magna a odio vestibulum laoreet. Vivamus faucibus tincidunt massa. Sed a nunc. Quisque varius sagittis libero.




Latest Information




Latest Information
Fusce fermentum

Donec posuere enim a sapien.
Malesuada fames ac turpis egestas.
Vivamus dignissim tincidunt quam.
Nullam varius vestibulum mauris.
Curabitur faucibus varius dui.
Cras suscipit viverra felis. Nullam diam.
Vivamus convallis volutpat nunc.
Sed porttitor dui vel nunc.

Latest Product Information

Nam porttitor congue diam. Donec in mi. Fusce ac neque. Donec quis justo. Nunc non justo quis augue sagittis volutpat. Etiam quis ligula commodo augue tempus pulvinar. Morbi ante arcu, aliquam ut, consequat et, consequat sed, sem. Cras suscipit viverra felis. Nullam diam. Duis eros purus, ornare sit amet, viverra sed, laoreet ac, pede.




Press Release




Press Release
Quisque varius

11th June 2007
In feugiat scelerisque pede.
Morbi iaculis eleifend ante.
Maecenas fringilla scelerisque erat.
Nam accumsan egestas eros.

News and Information

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vitae sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ut nunc. In dictum, dui nec vehicula vehicula, neque leo faucibus est, porta vehicula nisi odio eu tellus.




Contact us




Contact us
Donec condimentum

Phasellus vitae arcu et mauris facilisis ornare.
Nullam ultrices urna nec erat facilisis faucibus.
Ut cursus posuere eros.
Vestibulum dapibus tortor eu nisl.
Proin ac mauris non lacus pharetra aliquet.

Contact Details

Praesent vehicula interdum massa. Nunc velit erat, pulvinar vitae, tempor non, porttitor non, ipsum. Nullam venenatis, quam a tincidunt semper, neque velit dictum quam, at mattis mauris mauris a dolor. Aliquam urna. Ut pellentesque dapibus quam. Mauris dapibus dictum felis. Praesent tellus quam, aliquet in, malesuada aliquet, pretium non, eros. Cras aliquam ligula vitae nunc.

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

2．在页面上写nav标签，放入三个超链接（首页，第一栏，第二栏），代码如下。

3．运行代码，效果如下。

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

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

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

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

是在动画播放时，浏览者用鼠标或键盘对动画的播放进行控制的性能。这些控制大多由按钮来完成，本章将叙述按钮外观的制作及一些常用控制语句的使用。

认识按钮的帧结构

按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，如

参考资料有图文解说

<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>

利用的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() 方法。

用jquery的hover方法吧

---

海门市18898879883： 求教html中鼠标经过,点击的问题,谢谢 - ？
子丰乖人乙： 更换一只鼠标试试,可能是鼠标有问题.

海门市18898879883： CSS样式鼠标点击与经过的效果一样 - ？
子丰乖人乙： 1、新建一个HTML文件,文件名为test.html,title标题为＂CSS实现鼠标经过导航的超链接时显示下划线效果＂.2、在页面编写nav标签,在里面放三个超链接(首页、栏目一、栏目二),代码如下:3、运行代码,效果如下:4、使用css对导航的字体的字体大小、颜色、排列方式等进行美化,代码如下:5、运行代码,效果如下:可见,经过CSS样式美化,鼠标经过的时候,显示蓝色.6、利用CSS编写代码,实现鼠标经过时显示下划线效果,代码如下:7、在浏览器运行代码,实现了想要的效果.

海门市18898879883： 请问一下.我想用html、css写出这种效果.点击展开,下面那一行就展开,再点击就收缩回去.怎么写啊?? - ？
子丰乖人乙： 用js写吧 给点击展开一个onclick事件,然后设置两个样式一个open一个close,事件里判断当前样式,若是close,就先removeClass(close),然后addClass(open);若是open,同理

海门市18898879883： html select列表可以自动展开吗? - ？
子丰乖人乙： 为简化用户操作,希望鼠标悬停在下拉列表框上时,能自动展开.查了一下select的属性,没有相关的操作.最后找了一个变通的办法,代码如下:<select onmouseover=＂size=10;＂ onmouseout=＂size=1;＂ onchange=＂size=1;＂> <option ...

海门市18898879883： 求鼠标经过时,自动展开子菜单的代码 javascript？
子丰乖人乙： 首先a是内联标签,不适合做容器,帮你改了下: <!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂ ＂http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＂> <html xmlns=＂http://www.w3.org/1999/xhtml＂> <head> ...

海门市18898879883： HTML为什么鼠标经过的效果,到手机上就变成第一次点击的效果. - ？
子丰乖人乙： 机上不可能只实现 :hover肯定会和点击时效果一起触发.如果没有写点击时的样式,就会出现 :hover的样式.所以手机上的 :hover 的效果,点击的接触点(相当于鼠标)放在了那个链接上面,就相当于触发了 ,触摸屏幕了就肯定触发点击效果.而点击的时候:hover 的效果

海门市18898879883： 请问如何使按钮当鼠标经过是,自动变换图像,当然在HTML当中实现.尽量少用JS,我用CSS,做了很多,但都实 - ？
子丰乖人乙： 你这个<input>中用了class=＂mid_btm＂,那么你在css里要这样写:.mid_btm{ width:120px; height:30px; background:url(xxx.jpg) no-repeat; }.mid_btm:hover{ background:url(yyy.jpg) no-repeat; } 上面两句就实现了你的按钮是图片显示,并且鼠标经过时,变换成另一张图片.其中鼠标经过时变换图片的css是第二句,即后面加一个:hover,代表鼠标划过的动作.

海门市18898879883： HTML如何实现展开式菜单(实现效果:点击一项展开子菜单,点击另一项展开此项子菜单同时关闭前一项子菜单) - ？
子丰乖人乙： 我看了你的这个菜单!这样子可以了啊! 没有必要再收起来! 你看过那个菜单点击下一个菜单就把上一个菜单中的子菜单给隐藏??? 如果你要那么做的话! 你可以用javascript 做判断! 根据DIV的id来判断! 获取你点击的ID 再判断 id不相等的就隐藏! 你自己试试吧!

海门市18898879883： 我想要一段,菜单,只要鼠标经过,就会自动点击链接的js代码.谢谢.？
子丰乖人乙： 写个跳转函数,然后菜单上面定义时间为onmouseover

海门市18898879883： 不用css不用js之类的,就传统html代码如何做出鼠标悬停展开的效果? - ？
子丰乖人乙： 这不太可能吧.鼠标悬停就是一个事件,触发事件来改变css样式.html本身就一些标签,html5的特效会多点.