快捷導(dǎo)航

完全用CSS實(shí)現(xiàn)鼠標(biāo)移動到圖片并更換圖片

更新時(shí)間：2012年12月11日 11:51:29 作者：

CSS實(shí)現(xiàn)鼠標(biāo)移動到圖片，更換圖片，這是一個(gè)完全用CSS實(shí)現(xiàn)的效果,由此我們可以制作一些效果復(fù)雜的按鈕，比如換色按鈕

CSS實(shí)現(xiàn)鼠標(biāo)移動到圖片，更換圖片，這是一個(gè)完全用CSS實(shí)現(xiàn)的效果，當(dāng)然用JavaScript也可以實(shí)現(xiàn)，當(dāng)把鼠標(biāo)移動到圖片的時(shí)候，圖片自動更換為其它的圖片，由此我們可以制作一些效果復(fù)雜的按鈕，比如換色按鈕。

<!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=gb2312" /> <title>CSS實(shí)現(xiàn)鼠標(biāo)移動到圖片，更換圖片</title> </head> <style type="text/css"> *{ margin: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(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s1.jpg);}/*鏈接、點(diǎn)擊后*/ .nav ul li a:hover{background:url(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s2.jpg);}/*鼠標(biāo)經(jīng)過*/ .nav ul li a:active{background:url(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s3.jpg);}/*點(diǎn)擊時(shí)*/ </style> <body> <div   id="vvxyksv9kd"   class="nav"> <ul> <li><a ></a></li> <li><a ></a></li> <li><a ></a></li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]