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

ttx9n · 发表于 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(//files.jb51.net/file_images/article/201212/picmove_1/wall_s1.jpg);}/*链接、点击后*/ .nav ul li a:hover{background:url(//files.jb51.net/file_images/article/201212/picmove_1/wall_s2.jpg);}/*鼠标经过*/ .nav ul li a:active{background:url(//files.jb51.net/file_images/article/201212/picmove_1/wall_s3.jpg);}/*点击时*/ </style> <body> <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> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

q215357618 · 发表于 2022-8-11 10:01:03

人都不在了啊啊

7jbiiz · 发表于 2022-10-26 19:27:00

激动人心，无法言表！

w18pvaep · 发表于 2022-12-1 03:39:59

天天源码社区论坛

64000928 · 发表于 2023-6-24 02:15:35

还有人在不。。。。。。。。。。啊

w18pvaep · 发表于 2023-8-20 23:27:24

不错的源码论坛

sykzus · 发表于 2023-8-27 20:05:13

下载来瞧瞧

xf9hlg1 · 发表于 2023-11-10 15:14:14

这个源码不错啊

7jbiiz · 发表于 2023-11-15 13:56:40

啊啊啊啊啊啊啊啊啊啊啊啊啊啊

a971560 · 发表于 2024-4-8 13:12:58

老大你好你好好你好

账号		自动登录	找回密码
密码			立即注册

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

相关帖子