<!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" />
<link rel="stylesheet" href="index1.css" type="text/css">
<script language="javascript" type="text/javascript" src="../jquery-2.0.3.min.js"></script>
<style>
.right { background:#000;}
</style>
<title>无标题文档</title>
</head>
<body><div id="head">
   <div class="top" >
   <a href="#"><span>首页</span></a>&nbsp;<a href="ziji.html"><span>返回首页</span></a>&nbsp;<a href="#"><span>登入</span></a>
   </div>
   <div class="head-top">
     <div class="kuan">
      <ul>
   <a href="fang.html"><li>男鞋</li></a>
   <a href="fang.html"><li>女鞋</li></a>
   <a href="fang.html"><li>男装</li></a>
   <a href="fang.html"><li>女装</li></a>
   <a href="fang.html"><li>女包</li></a>
 </ul>
 </div>
   </div>
   <div class="down" >
       <div class="seach"> 
    <form>
<input type="text" style="width:900px;height:33px;"/>
</form>
   </div>
   <div class="seach1" >
     <a href="#"><span>搜索</span></a>
   </div>
   </div>
 </div>
 <div id="content" >
     
     <div class="content-div" >
    <div class="content-div1" ><a href="fang.html"><img src="images/2.jpg"/></a></div>
<div class="content-div2"><span>夏季新品</span></div>
 </div>
 <div class="content-div" >
    <div class="content-div1" ><a href="fang.html"><img src="images/2.jpg"/></a></div>
    <div class="content-div2"><span>夏季新品</span></div>
 </div>
 <div class="content-div" >
    <div class="content-div1" ><a href="fang.html"><img src="images/2.jpg"/></a></div>
    <div class="content-div2"><span>夏季新品</span></div>
 </div>
 <div class="content-div" >
    <div class="content-div1" ><a href="fang.html"><img src="images/2.jpg"/></a></div>
    <div class="content-div2"><span>夏季新品</span></div>
 </div>
 <div class="content-div" >
    <div class="content-div1" ><a href="fang.html"><img src="images/2.jpg"/></a></div>
    <div class="content-div2"><span>夏季新品</span></div>
 </div>
 <div class="content-div" >
    <div class="content-div1" ><a href="fang.html"><img src="images/2.jpg"/></a></div>
    <div class="content-div2"><span>夏季新品</span></div>
 </div>
 <div class="content-div" >
    <div class="content-div1" ><a href="fang.html"><img src="images/2.jpg"/></a></div>
    <div class="content-div2"><span>夏季新品</span></div>
 </div>
 <div class="content-div" >
    <div class="content-div1" ><a href="fang.html"><img src="images/2.jpg"/></a></div>
    <div class="content-div2"><span>夏季新品</span></div>
 </div>
  
 </div>
 <div id="footer" >
 ni 
 </div>
 <script type="text/javascript">
 $(document).ready(function(){
  $("div.kuan ul li").mouseover(function(){
 $(this).addClass("right").siblings()
 .removeClass("right");
 
 }).mouseout(function(){$(this).removeClass("right")});
 });
</script>
</body>
</html>
CSS 部分  @charset "utf-8";
/* CSS Document */
/*公共*/ body div{ margin:0 ;padding:0 ;}
 body {width:1000px;height:1000px;margin:0 auto;}
 ul, li  { list-style-type: none; margin:0px; padding:0px;}
 a:link,a:visited{ text-decoration:none;}
 a:hover{text-decoration:underline;}
/*头的部分 */
#head {width:1000px;height:120px;background:url(images/1.jpg);}
.top {width:1000px;height:40px;background:#FFF;}
.head-top {width:1000px;height:40px;padding-bottom:0;}
.kuan {margin:0 0 0 145px;width:800px;height:40px;}
.down {width:1000px;height:40px;}
.head-top ul {width:1000px;}
.head-top ul li {float:left;background:#FC0;width:140px;height:40px;px;text-align:center;margin-left:5px;font-size:24px;font-weight:bold;}
.seach {width:900px;height:40px;float:left;}
.seach1 {width:95px;height:40px;float:left;margin-left:5px;background:#666;font-size:24px;}
/*中间部分*/
#content {width:1000px;height:740px;margin-top:4px;background:#CF0;}
.content-div {width:240px;height:348px;float:left;margin-left:7px;margin-top:12px;}
.content-div1 {width:240px;height:250px;}
.content-div2 {width:240px;height:100px;background:#FF0;}/*尾部*/
#footer {width:1000px;height:135px;background:#999;}
 /*新增的CSS*/
.right {background:#000;}
 用JQ希望头部的导航条鼠标在上面的时候变色,鼠标离开时颜色变回去,但是没有任何反应,麻烦各位大哥 看看那里出错了 !!!

解决方案 »

  1.   

    改动JQ 代码<script type="text/javascript">
     $(document).ready(function(){
     alert("helloworld!")
      /*$(".kuan".children("ul").children("li")).mouseover(function(){
     $(this).addClass("right").siblings()
     .removeClass("right");
     
     }).mouseout(function(){$(this).removeClass("right")});*/
     });
    </script>后可以正常输出,而且把代码换了 $(".kuan".children("ul").children("li")),但是还是没反应,这个到底是那里出问题了。