首頁 > 開發者 > JavaScript
CSS實現滑鼠移動到圖片，更換圖片，這是一個完全用CSS實現的效果，當然用JavaScript也可以實現，當把滑鼠移動到圖片的時候，圖片自動更換為其它的圖片，由此我們可以製作一些效果複雜的按鈕，比如換色按鈕。
<!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實現滑鼠移動到圖片，更換圖片</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(http://files.jb51.net/file_images/article/201212/picmove_1/wall_s1.jpg);}/*連結、點擊後*/ .nav ul li a:hover{background:url(http://files.jb51.net/file_images/article/201212/picmove_1/wall_s2.jpg);}/*滑鼠經過*/ .nav ul li a:active{background:url(http://files.jb51.net/file_images/article/201212/picmove_1/wall_s3.jpg);}/*點擊時*/ </style> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
