Jquery is a simple way to change the background image with the mouse passing through the navigation bar
The effect of changing the background image with the mouse over the navigation bar is very nice. The following describes how jquery is used. If you are interested, refer
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> maintenance... </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 {
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>
<Div id = "container">
<Div id = "head">
<Ul class = "head_ul">
<Li> <a href = "#"> homepage </a> </li>
<Li> <a href = "#"> homepage </a> </li>
<Li> <a href = "#"> homepage </a> </li>
<Li> <a href = "#"> homepage </a> </li>
<Li> <a href = "#"> homepage </a> </li>
<Li> <a href = "#"> homepage </a> </li>
</Ul>
</Div>
<Div id = "main">
<Div id = "left"> </div>
<Div id = "right"> </div>
<Div id = "clear"> </div>
</Div>
<Div id = "foot"> </div>
</Div
</Body>
</Html>