鼠标移动到别的菜单时,当前菜单颜色改变,怎样实现? 在线等~~~~~

[yangtzeu]

菜单的代码:

<div id="sideleft">
<ul id="menu1">
<li class="current"><a title="Home" href="#" id="home">Home</a></li>
<li><a title="" href="environment.asp" >区位优势</a> </li>
<li><a title="" href="villabook.asp">别墅预定</li>
<li><a title="" href="enjoy.asp">享受更多</a></li>
<li><a title="" href="cooperation.asp">合作流程</a></li>
<li><a title="" href="contactus.asp">联系我们</a></li>
<li><a title="" href="vidio.asp">欣赏视频</a></li>
</ul>
</div>
抓图:


说明:
class="current"是显示橙色背景(当前页面),当我鼠标移动到别的菜单时候,让该菜单变成灰色背景,当鼠标又从别的菜单移走的
时候，改菜单又恢复成橙色

详见测试网址: www.hxxjhouse.com/2008/index.asp

[yangtzeu]

up

[yangtzeu]

upup

[yangtzeu]

附样CSS式表:

html{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
FONT: 14px/2.0em Arial, 宋体,Helvetica, sans-serif; COLOR: #666;background:#fffff8;
}
H1 {
LINE-HEIGHT: 2.5em
}
H2 {
LINE-HEIGHT: 2.5em
}
H3 {
LINE-HEIGHT: 2.5em
}
H4 {
LINE-HEIGHT: 2.5em
}
H5 {
LINE-HEIGHT: 2.5em
}
H6 {
LINE-HEIGHT: 2.5em
}
H3 {
FONT-SIZE: 16px
}
H4 {
FONT-SIZE: 14px
}
UL {
LIST-STYLE-TYPE: none
}
IMG {
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
A IMG {
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
EM {

}
.display_block {
CLEAR: both; DISPLAY: block
}
.display_on {
DISPLAY: block; VISIBILITY: visible
}
.display_off {
DISPLAY: none; VISIBILITY: hidden
}
.v_middle {
VERTICAL-ALIGN: middle
}
.center {
TEXT-ALIGN: center
}
.right {
BORDER-RIGHT: #ddd 1px dotted;
PADDING-RIGHT: 1em;
BORDER-TOP: #ddd 1px; DISPLAY: block;
BORDER-LEFT: #ddd 1px dotted;
LINE-HEIGHT: 1.8em;
BORDER-BOTTOM: #ddd 1px dotted;
TEXT-ALIGN: right
}
.right A:link {
COLOR: #f60; TEXT-DECORATION: underline
}
.right A:visited {
COLOR: #ff6600; TEXT-DECORATION: underline
}
.right A:hover {
COLOR: #666; TEXT-DECORATION: none
}
.banner {
CLEAR: both
}
.float_right {
FLOAT: right; MARGIN: 10px
}
.pages {
CLEAR: both; MARGIN-TOP: 10px; TEXT-ALIGN: right
}
.m2 {
FONT-WEIGHT: normal; FONT-SIZE: 9px; VERTICAL-ALIGN: top
}
.bar {
MARGIN-TOP: 10px
}
.red {
COLOR: red
}
.orange {
COLOR: #ff6600
}
.blue {
COLOR: #39f
}
.white {
COLOR: #fff
}
.error {
COLOR: #ff3300
}
A:visited {
COLOR: #f60; TEXT-DECORATION: none
}
A:link {
COLOR: #f60; TEXT-DECORATION: none
}
A:hover {
COLOR: #333; TEXT-DECORATION: underline
}
#wrapper {
WIDTH: 980px
}
#header {
BACKGROUND: url(images/logo_about.gif) #fff no-repeat; POSITION: relative; HEIGHT: 161px
}
#header H1 A {
DISPLAY: block; LEFT: 30px; WIDTH: 235px; TEXT-INDENT: -9999em; POSITION: absolute; TOP: 16px; HEIGHT: 42px
}
#header .close {
DISPLAY: block; RIGHT: 20px; WIDTH: 62px; TEXT-INDENT: -9999em; POSITION: absolute; TOP: 0px; HEIGHT: 20px
}
#header .close:link {
COLOR: #666
}
#header .close:visited {
COLOR: #666
}
#main {
BACKGROUND: url(images/bgline.gif) repeat-y; OVERFLOW: hidden; WIDTH: 980px
}
#sideleft {
FLOAT: left; WIDTH: 204px
}
#sideright {
PADDING-RIGHT: 36px;
PADDING-LEFT: 15px;
BACKGROUND: url(images/bgcontent.gif) #fff no-repeat;
PADDING-BOTTOM: 30px;
MARGIN-LEFT: 204px;
PADDING-TOP: 0px;
TEXT-ALIGN: left
}
#sideright .wrapper {
HEIGHT: 1%
}
#sideright H2 {

}
#sideright H3 {
MARGIN-BOTTOM: 1em; COLOR: #336600; LINE-HEIGHT: 3em
}
#sideright P {
FONT-SIZE: 14px; TEXT-INDENT: 2em; LINE-HEIGHT: 1.8em
}
#sideright TABLE {
BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; MARGIN-LEFT: 0em; BORDER-LEFT: #ddd 1px solid; BORDER-BOTTOM: #ddd 1px solid; BORDER-COLLAPSE: collapse
}
#sideright TD {
BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #ddd 1px solid; TEXT-ALIGN: center
}
#sideright TD P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; PADDING-TOP: 0px
}
#footer {
CLEAR: both; PADDING-RIGHT: 1.5em; PADDING-LEFT: 1.5em; BACKGROUND: url(images/bgcopyright.gif) no-repeat left top; PADDING-BOTTOM: 2em; PADDING-TOP: 2em; POSITION: relative; HEIGHT: 20px
}
.top {
RIGHT: 30px; POSITION: absolute; TOP: 2em
}
#menu1 {
LIST-STYLE-TYPE: none;
font-family:黑体;
}
#menu1 LI A {
DISPLAY: block; PADDING-LEFT: 2em; FONT-WEIGHT: nomal; FONT-SIZE: 16px; BACKGROUND: url(images/bgmenu.gif) #fff no-repeat; COLOR: #fff; LINE-HEIGHT: 41px; HEIGHT: 41px; TEXT-DECORATION: none
}
/*菜单主要样式*/
#menu1 LI A:hover {
BACKGROUND: url(images/bgmenuover.gif) #fff no-repeat
}
#menu1 .current A {
BACKGROUND: url(images/bgmenucurr.gif) #fff no-repeat
}
#menu1 .current A:hover {
BACKGROUND: url(images/bgmenucurr.gif) #fff no-repeat
}
#menu2 {
LIST-STYLE-TYPE: none
}
#menu1 #menu2 LI A {
DISPLAY: block; PADDING-LEFT: 4em; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(images/bgmenu2.gif) no-repeat 0px 0px; COLOR: #fff; LINE-HEIGHT: 31px; HEIGHT: 31px; TEXT-DECORATION: none
}
#menu1 #menu2 LI A:hover {
BACKGROUND: url(images/bgmenu2.gif) no-repeat 0px -31px
}
#menu1 #menu2 .current A {
BACKGROUND: url(images/bgmenu2.gif) #fff no-repeat 0px -93px
}
#menu1 #menu2 .current A:hover {
BACKGROUND: url(images/bgmenu2.gif) #fff no-repeat 0px -93px
}

.title1
{
font-family:黑体;
font-size:16px;
}
.table1
{

background:#ffffff;
border:1px solid #d0d0d0;
}
.table2
{
background:#f0f0f0;
border:0px solid #d0d0d0;
}
p{

font-weight:normal;
font-size:16px;
font-family:黑体;
}
#home{
font-family:Arial;
font-weight:bold
}

A:visited {
COLOR: #3d3d3d; TEXT-DECORATION: none
}
A:link {
COLOR: #3d3d3d; TEXT-DECORATION: none
}
A:hover {
COLOR: #f60; TEXT-DECORATION: underline
}

[草原可可]

onmouseover看看看

[什么都不能]

<html>
<head>
<title>Simple Menu Demo</title>
<script type="text/javascript">
  var defaultClassName="m1";
  var hoverClassName="m2";
  function _hover(isHover,defaultMenu,evt){
      var eventSrc=window.event?event.srcElement:evt.target;
	  var currentMenu=$(defaultMenu);
      setTimeout(function(){	
		if(isHover==true){
			eventSrc.className=hoverClassName;
			if(eventSrc!=currentMenu)
				currentMenu.className=defaultClassName;
		}else{
		    if(eventSrc!=currentMenu)
				eventSrc.className=defaultClassName;
			currentMenu.className=hoverClassName;
		}
	},100);

  }
  function $(id)
  {
      return document.getElementById(id);
  }
</script>
<style type="text/css">
  .m1{background-color:#EEEEEE;}
  .m2{background-color:#222222;}
</style>
</head>
<body>
<table border=0 width="50" cellspacing="0" cellpadding="0">
<tr>
<td class="m2" id="m1" onmouseover="_hover(true,'m1')" onmouseout="_hover(false,'m1')">1</td>
</tr>
<tr>
<td class="m1" id="m2" onmouseover="_hover(true,'m1')" onmouseout="_hover(false,'m1')">2</td>
</tr>
<tr>
<td class="m1" id="m3" onmouseover="_hover(true,'m1')" onmouseout="_hover(false,'m1')">3</td>
</tr>
<tr>
<td class="m1" id="m4" onmouseover="_hover(true,'m1')" onmouseout="_hover(false,'m1')">4</td>
</tr>
</table>
</body>
</html>

[yangtzeu]

已解决,谢谢 hanpoyangtitan(韩波洋)

[yangtzeu]

不行

[yangtzeu]

up