Home > Article > Web Front-end > jquery realizes the effect of changing the background image when the mouse passes through the navigation bar

jquery realizes the effect of changing the background image when the mouse passes through the navigation bar

怪我咯Original: 2017-06-29 10:52:411343browse

The effect of changing the background image when the mouse passes through the navigation bar is very beautiful. Here is an introduction to how to achieve it using jquery. Interested friends can refer to it

The code is as follows:

<!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(&#39;background&#39;,&#39;url(b2.png)&#39;); 
},function(){ 
$(this).css(&#39;background&#39;,&#39;url(b1.png)&#39;); 
} 
); 
}); 
</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>

The above is the detailed content of jquery realizes the effect of changing the background image when the mouse passes through the navigation bar. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS mouse event implements simple mouse passing effectsNext article：JS mouse event implements simple mouse passing effects

See more

jquery realizes the effect of changing the background image when the mouse passes through the navigation bar

Related articles