CSS implementation of the mouse to move to the picture, replace the picture, this is a full use of CSS to achieve the effect, of course, with JavaScript can also be achieved, when the mouse moved to the picture, the picture automatically replaced by other pictures, which we can make some effects of complex buttons, such as color Change button
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>css implement mouse move to picture, replace picture </title> </pead> <style type=" Text/css "> *{Mar gin:0; padding:0;} UL li{List-style:none;} . nav{width:800px; height:40px; margin:150px auto; . Nav ul li{float:left; width:200px;} . Nav ul Li a:link,a:visited{display:block; width:190px; height:40px; Background:url (yun_qi_img/wall_s1.jpg); /* Link, click after * * Nav ul Li A:hover{background:url (yun_qi_img/wall_s2.jpg);} /* Mouse through * * Nav ul Li A:active{background:url (yun_qi_img/wall_s3.jpg);} /* Click on </style> <body> <div class= "nav" > <ul> <li></li> <li></li> <li></li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
