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

网络编程 2024/9/30 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

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> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更换图片,鼠标移动

标签：

更换图片,鼠标移动

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

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

暂无评论...

更新日志

2024年09月30日

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

更换图片,鼠标移动

JS实现鼠标移动到缩略图显示大图的图片放大效果

javascript向flash swf文件传递参数值注意细节

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

更新日志

友情链接