比如我做一个菜单,是两张图片交换的,就是鼠标没动A时,是一张图,当我鼠标移到A时就变成另一张图A1,在DW中是用onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(这种方法,但在标准呢,该如何做?
要做十个菜单,每个菜单的图片都不相同。为A、B、C、D、E、F、。。。与这组图相对应的是A1、B1、C1。。。当鼠标移到A图片时,显示A1图,当鼠标移到B图片时,显示B1图..请问用CSS怎么实现---------------请试试下面的代码:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>菜鹰菜单</title><style type="text/css">#menulist {//*设定div的Box属性*//border: 1px solid #000;margin: 0px;width: 660px;padding: 5px;}#menulist ul, #menulist li {//*设定限制于div内的ul和li的属性*//display: inline;margin: 0;padding: 0;}.menu a:active,.menu a:visited,.menu a:link {display: inline;margin: 0;padding: 5;height:20px;width:100px;font-size:9pt;color: #696969;background-image:url(bt_off.gif);text-decoration: none;}.menu#a1 a:hover {color: #ff0000;background-image:url(bt_on1.gif);font-weight: bold;text-decoration: none;}.menu#a2 a:hover {color: #ff0000;background-image:url(bt_on2.gif);font-weight: bold;text-decoration: none;}.menu#a3 a:hover {color: #ff0000;background-image:url(bt_on3.gif);font-weight: bold;text-decoration: none;}.menu#a4 a:hover {color: #ff0000;background-image:url(bt_on4.gif);font-weight: bold;text-decoration: none;}.menu#a5 a:hover {color: #ff0000;background-image:url(bt_on5.gif);font-weight: bold;text-decoration: none;}.menu#a6 a:hover {color: #ff0000;background-image:url(bt_on6.gif);font-weight: bold;text-decoration: none;}</style></head><body><div id="menulist" align="center"><ul class="menu"><li id="a1"><a href="#">首页</a></li><li id="a2"><ahref="#">产品介绍</a></li><li id="a3"><ahref="#">服务介绍</a></li><li id="a4"><ahref="#">技术支持</a></li><li id="a5"><ahref="#">立即购买</a></li><li id="a6"><ahref="#">联系我们</a></li></ul></div></body></html>(效果见附件)附件:CSS导航菜单(图片).rar
提问者对答案的评价:
哇好厉害啊那用"插入"--"鼠标经过图像"这种方式和你的那个方法有那些区别呢? |