鼠标滑过导航条改变背景图的jquery实现代码
本文导语: 本节内容： jquery实现鼠标经过导航条改变背景图的效果。 例子： 代码示例: 鼠标滑过导航条改变背景图-www. *{ margin:0; padding:0; } body{ text-align:center; background:yellow; } #container{ width:962px; height:auto; b...
本节内容：
jquery实现鼠标经过导航条改变背景图的效果。
例子：
鼠标滑过导航条改变背景图-www.
*{
margin:0;
padding:0;
}
body{
text-align:center;
background:yellow;
}
#container{
width:962px;
height:auto;
background:url(/blog_article/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(/blog_article/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%;
}
$(function(){
$(".head_ul li").hover(function(){
$(this).css('background','url(/blog_article/b2.png)');
},function(){
$(this).css('background','url(/blog_article/b1.png)');
}
);
});
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。