<div class= "All" > <div class= "M1" jquery1274844839136= "1" > Title 1</div> <div class= "m2" jquery1274844839136= "2" > title 2</div> <div class= "M3" jquery1274844839136= "3" > title 3</div> <div Class= "M4" jquery1274844839136= "4" > title 4</div> <div class= "M5" jquery1274844839136= "5" > title 5</div > <div class= "M6" jquery1274844839136= "6" > title 6</div> </div> <div> Enter to see the effect! </div> <script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.4.2.min.js" ></script ><script type= "Text/javascript" > $ (document). Ready (function () {myhide (); }); function Myhide () {//alert ("Hello"); Register event $ (". M1"). Bind (' mouseover ', m1_mouseover); $ (". M1"). Bind (' mouseout ', m1_mouseout); $ (". M2"). Bind (' mouseover ', m2_mouseover); $ (". M2"). Bind (' mouseout ', m2_mouseout); $ (". M3"). Bind (' mouseover ', m3_mouseover); $ (". M3"). Bind (' mouseout ', m3_mouseout); $ (". M4"). Bind (' mouseover ', m4_mouseover); $ (". M4"). Bind (' Mouseout ', m4_mouseout); $ (". M5"). Bind (' mouseover ', m5_mouseover); $ (". M5"). Bind (' mouseout ', m5_mouseout); $ (". M6"). Bind (' mouseover ', m6_mouseover); $ (". M6"). Bind (' mouseout ', m6_mouseout); }; function M1_mouseover () {$ (". M1"). Animate ({width: "100px", Height: "30px", FontSize: "22px"}, "fast"); function M1_mouseout () {$ (". M1"). Animate ({width: "70px", Height: "20px", FontSize: "14px"}, "fast"); function M2_mouseover () {$ (". M2"). Animate ({width: "100px", Height: "30px", FontSize: "22px"}, "fast"); function M2_mouseout () {$ (". M2"). Animate ({width: "70px", Height: "20px", FontSize: "14px"}, "fast"); function M3_mouseover () {$ (". M3"). Animate ({width: "100px", Height: "30px", FontSize: "22px"}, "fast"); function M3_mouseout () {$ (". M3"). Animate ({width: "70px", Height: "20px", FontSize: "14px"}, "fast"); function M4_mouseover () {$ (". M4"). Animate ({width: "100px", Height: "30px", FontSize: "22px"}, "fast"); function M4_mouseout () {$ (". M4"). Animate ({width:" 70px ", Height:" 20px ", FontSize:" 14px "}," fast "); function M5_mouseover () {$ (". M5"). Animate ({width: "100px", Height: "30px", FontSize: "22px"}, "fast"); function M5_mouseout () {$ (". M5"). Animate ({width: "70px", Height: "20px", FontSize: "14px"}, "fast"); function M6_mouseover () {$ (". M6"). Animate ({width: "100px", Height: "30px", FontSize: "22px"}, "fast"); function M6_mouseout () {$ (". M6"). Animate ({width: "70px", Height: "20px", FontSize: "14px"}, "fast"); } </script> <style type= "Text/css" >. m1,.m2,.m3,.m4,.m5,.m6 {width:70px; height:20px; Background-color: #cccccc; Border:thin solid #9999ff; font-size:14px; }. all {width:80px; height:160px; Text-align:center; } </style>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
