首頁 > 開發者 > JavaScript
CSS實現滑鼠移動圖片實現切換功能，
CSS實現滑鼠移動圖片實現切換功能:
當滑鼠放在一個圖片上的時候可以切換為其他圖片，使用javascript可以實現，下面介紹一下如何使用CSS實現此功能。
代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><head><title>CSS實現的圖片轉場效果-螞蟻部落</title><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(images/wall_s1.jpg);}.nav ul li a:hover { background:url(images/wall_s2.jpg);}.nav ul li a:active { background:url(images/wall_s3.jpg);}</style></head><body><div class="nav"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul></div></body></html>
以上代碼實現了，當滑鼠放在連結上時，能夠實現圖片的切換功能。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8354
更多內容可以參閱:http://www.softwhy.com/divcss/
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
