jquery简单实现鼠标经过导航条改变背景图

  

复制代码 代码如下:

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

  *{

  margin:0;

  padding:0;

  }

  body{

  text-align:center;

  background:yellow;

  }

  #container{

  width:962px;

  height:auto;

  background:url(b3.jpg);

  margin:0px auto;

  }

  #head{

  height:100px;

  width:100%;

  }

  .head_ul{

  list-style:none;

  margin-left:200px;

  }

  .head_ul li{

  float:left;

  width:90px;

  height:50px;

  line-height:40px;

  font-size:20px;

  margin-top:40px;

  background:url(b1.png);

  }

  .head_ul li a{

  text-decoration:none;

  }

  #main{

  width:100%;

  height:1500px;

  }

  #left{

  width:30%;

  height:100%;

  float:left;

  }

  #right{

  width:70%;

  height:100%;

  float:left;

  }

  #clear{

  clear:both;

  }

  #foot{

  height:100px;

  width:100%;

  }

  </style>

  <script src="jquery-1.7.2.js"></script>

  <script>

  $(function(){

  $(".head_ul li").hover(function(){

  $(this).css('background','url(b2.png)');

  },function(){

  $(this).css('background','url(b1.png)');

  }

  );

  });

  </script>

  </head>

  <body>

  <div id="container">

  <div id="head">

  <ul class="head_ul">

  <li><a href="#">首页</a></li>

  <li><a href="#">首页</a></li>

  <li><a href="#">首页</a></li>

  <li><a href="#">首页</a></li>

  <li><a href="#">首页</a></li>

  <li><a href="#">首页</a></li>

  </ul>

  </div>

  <div id="main">

  <div id="left"></div>

  <div id="right"></div>

  <div id="clear"></div>

  </div>

  <div id="foot"></div>

  </div

  </body>

  </html>