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