您的位置：首页 > Web前端 > JQuery

jquery鼠标经过导航条改变背景图

2013-12-16 22:24 471 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航