标签:
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.cnblogs.com/come-on/p/4803127.html