Maison > Article > interface Web > jquery réalise l'effet de changer l'image d'arrière-plan lorsque la souris passe dans la barre de navigation
jquery réalise l'effet de changer l'image d'arrière-plan lorsque la souris passe dans la barre de navigation
- 怪我咯original
- 2017-06-29 10:52:411299parcourir
L'effet de changer l'image d'arrière-plan en déplaçant la souris dans la barre de navigation est très beau. Voici une introduction à la façon d'y parvenir en utilisant jquery. Les amis intéressés peuvent se référer à
Le code. est la suivante :
<!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>
<p id="container">
<p 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>
</p>
<p id="main">
<p id="left"></p>
<p id="right"></p>
<p id="clear"></p>
</p>
<p id="foot"></p>
</p
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn