Copy codeThe 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> http://flytosky.qzone.qq.com </title>
<Style type = "text/css">
* {Font-family: ""; margin: 0 auto; padding: 0px ;}
. Zj_nei_l {width: 1150px; height: 130px; margin-left: 25px ;}
. Zj_nei_l li {float: left; font-size: 20px; color: # 6f6f6f; text-align: center; margin: 0px 5px; list-style: none ;}
. Show_box. left_box,. show_box. right_box {
Float: left;
Height: 130px;
}
. Text_content p {text-align: left; font-size: 16px; color: # fff; line-height: 24px; padding: 10px ;}
. Zj_nei_l li. show_box {
Width: 98px;
}
. Zj_nei_l li. show_box_hover {
Width: 522px;
}
. Show_box. right_box {
Display: none;
Width: 414px;
Height: 130px;
Overflow: hidden;
Margin-left: 10px;
}
. Right_box. text_content {
Width: 414px;
Background-color: #339933;
Color: # FFF;
Height: 130px;
}
. Zj_nei_l. left_box {
Width: 88px;
Font-size: 20px;
}
. Zj_nei_l. left_box p {
Line-height: 42px;
Font-size: 20px;
}
. Zj_nei_l. img_box {
Width: 88px;
Height: 88px;
}
. Show_box. item1 {
Background: #030;
}
. Show_box. item2 {
Background: #300;
}
. Show_box. item3 {
Background: #600;
}
. Show_box. item4 {
Background: #6C0;
}
. Show_box. item5 {
Background: #6F9;
}
. Show_box. item6 {
Background: #3F9;
}
. Show_box_hover. left_box {
Color: #339933;
}
. Show_box_hover. item1 {
Background: #0F9;
}
. Show_box_hover. item2 {
Background: # 00C;
}
. Show_box_hover. item3 {
Background: #906;
}
. Show_box_hover. item4 {
Background: #9F6;
}
. Show_box_hover. item5 {
Background: # CF9;
}
. Show_box_hover. item6 {
Background: # 90F;
}
</Style>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.10.2.min.js"> </script>
</Head>
<Body>
<Div class = "zj_nei_l">
<Ul>
<Li class = "show_box show_box_hover">
<Div class = "left_box">
<Div class = "img_box item1">
</Div>
<P> learn knowledge> </p>
</Div>
<Div class = "right_box" style = "display: block;">
<Div class = "text_content">
<P> contact Tom if you have any questions! Make like-minded friends </p>
<P> Email: flytosky1991@126.com </p>
<P> QQ (879974693) </p>
</Div>
</Div>
<Div class = "clearboth"> </div>
</Li>
<Li class = "show_box">
<Div class = "left_box">
<Div class = "img_box item2"> </div>
<P> friend </p>
</Div>
<Div class = "right_box">
<Div class = "text_content">
<P> contact Tom if you have any questions! Make like-minded friends </p>
<P> Email: flytosky1991@126.com </p>
<P> QQ (879974693) </p>
</Div>
</Div>
<Div class = "clearboth"> </div>
</Li>
<Li class = "show_box">
<Div class = "left_box">
<Div class = "img_box item3"> </div>
<P> make money> </p>
</Div>
<Div class = "right_box">
<Div class = "text_content">
<P> contact Tom if you have any questions! Make like-minded friends </p>
<P> Email: flytosky1991@126.com </p>
<P> QQ (879974693) </p>
</Div>
</Div>
<Div class = "clearboth"> </div>
</Li>
<Li class = "zj_line"> </li>
<Li class = "show_box">
<Div class = "left_box">
<Div class = "img_box item4"> </div>
<P> Find a business </p>
</Div>
<Div class = "right_box">
<Div class = "text_content">
<P> contact Tom if you have any questions! Make like-minded friends </p>
<P> Email: flytosky1991@126.com </p>
<P> QQ (879974693) </p>
</Div>
</Div>
<Div class = "clearboth"> </div>
</Li>
<Li class = "show_box">
<Div class = "left_box">
<Div class = "img_box item5"> </div>
<P> talent recruitment </p>
</Div>
<Div class = "right_box">
<Div class = "text_content">
<P> contact Tom if you have any questions! Make like-minded friends </p>
<P> Email: flytosky1991@126.com </p>
<P> QQ (879974693) </p>
</Div>
</Div>
<Div class = "clearboth"> </div>
</Li>
<Li class = "show_box">
<Div class = "left_box">
<Div class = "img_box item6"> </div>
<P> development </p>
</Div>
<Div class = "right_box">
<Div class = "text_content">
<P> contact Tom if you have any questions! Make like-minded friends </p>
<P> Email: flytosky1991@126.com </p>
<P> QQ (879974693) </p>
</Div>
</Div>
<Div class = "clearboth"> </div>
</Li>
</Ul>
</Div>
<Script type = "text/javascript">
Var hide_boxw = $ (". right_box"). width ();
$ (". Show_box"). mouseenter (function (e ){
Var li = $ (this). find (". right_box ");
$ (This). addClass ("show_box_hover ");
If(li.css ("display") = "none "){
$ (". Right_box"). hide ();
$ (". Show_box"). removeClass ("show_box_hover ");
$ (This). addClass ("show_box_hover ");
Li.css ({"width": "0px", "display": "block "});
Li. animate ({"width": hide_boxw}, hide_boxw );
}
});
</Script>
</Body>
</Html>
Effect