高亮效果

网页互动，鼠标移动到某个地方高亮色闲话不多说，导航条互动，当鼠标移动上去就变色，现在的颜色是灰色现在的颜色是灰色，当移动到去变橙色，移出导航条就恢复成灰色。我自己做了下，当我鼠标移动到导航条，整个导航条都变色，这不是我需要的效果!
<style type="text/css">
body{
margin:0px;
}
#out{
width:811px;
height:570px;
margin:auto;
}
/* 全局*/
#head{
width:811px;
height:67px;
}
#head_a{
background-image:url(images/1_02.gif.gif);
width:209px;
height:67px;
}
#head_b{
float:right;
width:602px;
height:67px;
margin-top:-67px;
}
/* 头部*/
.tu{width:811px;
height:300px;
}
.xia{width:811px;
height:60px;
margin:auto;
}
.jichen{width:88px;
height:60px;
line-height:60px;
background-color:#CCCCCC;
float:left;
margin-left:1px;
margin-right:1px;
text-align:center;
}
#tu_a{background-image:url(images/1_08.gif.gif);
width:711px;
height:239px;
margin-top:0.7px;
margin-left:50px;
}
/*中间*/
#main{width:811px;
height:161px;
}
.lia{width:300px;
height:161px;
float:left;
margin-left:6px;
margin-right:6px;
}
#tu_b{background-image:url(images/1_12.gif.jpg);
width:162px;
height:101px;
float:left;
margin-left:5px;
}
.daohan{height:30px;
background-color:#000000;
}
.nei{width:300px;
height:131px;
background:url(images/tu.jpg)repeat-x;
}
#han{width:171px;
height:30px;
background-color:#00CC99;
}
.san{width:171px;
height:131px;
float:left;
margin-left:8px;
}
/*主要内容*/
#foot{width:811px;
height:30px;
background-image:url(images/1_52.gif.gif);
margin-top:15px;
}
/*尾页*/
</style>
<body>
<div id="out">
<div id="head">
                 <div id="head_a"></div>
                        <div id="head_b"></div>
                </div>
<div class="tu">
                 <div class="xia">
                 <div class="jichen">首页</div>
                         <div class="jichen">关于我们</div>
                         <div class="jichen">新闻中心</div>
                         <div class="jichen">产品中心</div>
                        <div class="jichen">地板保养</div>
                         <div class="jichen">国际化战略</div>
                          <div class="jichen">热点专题</div>
                          <div class="jichen">联系我们</div>
                            <div class="jichen">谢谢关注</div>
                        </div>
                        <div id="tu_a"></div>
                </div>
<div id="main">
                       <div class="lia">
                            <div class="daohan"></div>
<div class="nei"></div>
                       </div>
                       <div class="lia">
                            <div class="daohan"></div>
                        <div class="nei"></div>
                       </div>
                       <div class="san">
                            <div id="han"></div>
                        <div id="tu_b"></div>
                       </div>
                </div>
<div id="foot">                </div>
</div>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1、你的代码贴的不完整，是否没有贴引用的CSS
2、想单独每个导航变色，对每个导航的div对应的CSS上定义 xxx:hover {...}
html代码没有改动，增加了一个.orange样式类。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
margin:0px;
}
#out {
width:811px;
height:570px;
margin:auto;
}
/* 全局*/
#head {
width:811px;
height:67px;
}
#head_a {
background-image:url(images/1_02.gif.gif);
width:209px;
height:67px;
}
#head_b {
float:right;
width:602px;
height:67px;
margin-top:-67px;
}
/* 头部*/
.tu {
width:811px;
height:300px;
}
.xia {
width:811px;
height:60px;
margin:auto;
}
.jichen {
width:88px;
height:60px;
line-height:60px;
background-color:#CCCCCC;
float:left;
margin-left:1px;
margin-right:1px;
text-align:center;
}
#tu_a {
background-image:url(images/1_08.gif.gif);
width:711px;
height:239px;
margin-top:0.7px;
margin-left:50px;
}
/*中间*/
#main {
width:811px;
height:161px;
}
.lia {
width:300px;
height:161px;
float:left;
margin-left:6px;
margin-right:6px;
}
#tu_b {
background-image:url(images/1_12.gif.jpg);
width:162px;
height:101px;
float:left;
margin-left:5px;
}
.daohan {
height:30px;
background-color:#000000;
}
.nei {
width:300px;
height:131px;
background:url(images/tu.jpg)repeat-x;
}
#han {
width:171px;
height:30px;
background-color:#00CC99;
}
.san {
width:171px;
height:131px;
float:left;
margin-left:8px;
}
/*主要内容*/
#foot {
width:811px;
height:30px;
background-image:url(images/1_52.gif.gif);
margin-top:15px;
}
/*尾页*/
.orange {
background-color:#F90;
}
</style>
<script type="text/javascript">
window.onload = function() {
var obj = document.getElementsByTagName('div'), ar = [];;
for (var i = 0; i < obj.length; i ++) if (obj[i].className == 'jichen') ar.push(obj[i]);
for (var i = 0; i < ar.length; i ++) {
ar[i].onmouseover = function() {
for (var j = 0; j < ar.length; j ++) ar[j].className = 'jichen';
this.className = 'jichen orange';
}
ar[i].onmouseout = function() {
this.className = 'jichen';
}
}
}
</script>
</head><body>
<div id="out">
  <div id="head">
    <div id="head_a"></div>
    <div id="head_b"></div>
  </div>
  <div class="tu">
    <div class="xia">
      <div class="jichen">首页</div>
      <div class="jichen">关于我们</div>
      <div class="jichen">新闻中心</div>
      <div class="jichen">产品中心</div>
      <div class="jichen">地板保养</div>
      <div class="jichen">国际化战略</div>
      <div class="jichen">热点专题</div>
      <div class="jichen">联系我们</div>
      <div class="jichen">谢谢关注</div>
    </div>
    <div id="tu_a"></div>
  </div>
  <div id="main">
    <div class="lia">
      <div class="daohan"></div>
      <div class="nei"></div>
    </div>
    <div class="lia">
      <div class="daohan"></div>
      <div class="nei"></div>
    </div>
    <div class="san">
      <div id="han"></div>
      <div id="tu_b"></div>
    </div>
  </div>
  <div id="foot"> </div>
</div>
</body>
</html>
谢谢，哥们不知道这里的ar  ar.push代表着啥意思！
ar自定义的一个数组变量，通过遍历div集合，把class值为jichen的div元素对象保存到这个数组中。由于你的导航菜单容器没有指定id值，所以用这个数组起到一个保存筛选结果的作用。
ar.push(obj[i]);
在这代码里啥意思！其他的我都挺明白是咋回事！
push()是数组类型的一个方法，向数组中追加一个元素，元素可以是任意类型的（包括对象）。