完全用CSS实现鼠标移动到图片并更换图片

更新时间：2012年12月11日 11:51:29 作者：

CSS实现鼠标移动到图片，更换图片，这是一个完全用CSS实现的效果,由此我们可以制作一些效果复杂的按钮，比如换色按钮

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(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s1.jpg);}/*链接、点击后*/ .nav ul li a:hover{background:url(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s2.jpg);}/*鼠标经过*/ .nav ul li a:active{background:url(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s3.jpg);}/*点击时*/ </style> <body> <div class="nav"> <ul> <li><a href="http://jb51.net"></a></li> <li><a href="http://jb51.net"></a></li> <li><a href="http://jb51.net"></a></li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。
弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。...
2006-12-12
JavaScript 控制图片改变重叠顺序的代码(鼠标移动切换)
JavaScript实例，通过控制Html网页元素，来控制图片的重叠顺序，鼠标移上某一张，那一张就显示在最前面，移动到最后层，它会显示在最前，有意思吧，其实挺简单。
2010-10-10
JS 文件大小判断的实现代码
有时候我们的图片上传等功能，需要验证客户端的图片大小，比较只能上传小于100K的图片，这里客户端先简单的验证下。
2010-04-04
javascript椭圆旋转相册实现代码
支持自动和手动两种模式：自动模式下自动旋转展示，手动模式下通过鼠标选择当前图片，或通过提供的接口选择上一张/下一张图片
2012-01-01
超级经典一套鼠标控制左右滚动图片带自动翻滚
鼠标控制左右滚动图片带自动翻滚
2008-06-06
用javascript实现图片马赛克后显示并切换
用javascript实现图片马赛克后显示并切换...
2007-04-04
点图片上一页下一页翻页效果
实现图片翻页效果实例代码
2008-07-07
最简单的js图片切换效果实现代码
最简单的js图片切换效果实现代码，需要的朋友可以参考下。
2011-09-09
照片各部分的彩色与黑白交替更换
照片各部分的彩色与黑白交替更换...
2007-02-02
感应鼠标的图片遮罩动画效果
感应鼠标的图片遮罩动画效果，鼠标放上后会动画显示文字提示，有意思哦，有兴趣的朋友运行一下看效果。
2010-10-10