ホームページ > 記事 > ウェブフロントエンド > jquery は、ナビゲーションを通じて背景画像を変更するマウスを実装するだけです。
jquery は、ナビゲーションを通じて背景画像を変更するマウスを実装するだけです。
- WBOYオリジナル
- 2016-05-16 17:08:381076ブラウズ
复制代代码如下:
*{
マージン:0;
パディング:0;
}
body{
text-align:center;
背景:黄色;
}
#container{
width:962px;
高さ:自動;
背景:url(b3.jpg);
マージン:0px 自動;
}
#head{
高さ:100px;
幅:100%;
}
.head_ul{
リストスタイル:なし;
マージン左:200px;
}
.head_ul li{
float:left;
幅:90ピクセル;
高さ:50ピクセル;
行の高さ:40px;
フォントサイズ:20px;
マージントップ:40px;
背景:url(b1.png);
}
.head_ul li a{
text-decoration:none;
}
#main{
width:100%;
高さ:1500ピクセル;
}
#left{
幅:30%;
高さ:100%;
浮動小数点:左;
}
#right{
幅:70%;
高さ:100%;
浮動小数点:左;
}
#clear{
clear:両方;
}
#foot{
高さ:100px;
幅:100%;
}
$(function(){
$(".head_ul li").hover(function(){
$(this).css('background','url(b2.png)') ;
},function(){
$(this).css('background','url(b1.png)');
}
});