CSS 鼠标移动切换
来源：互联网 发布：杭州师范大学 知乎 编辑：程序博客网 时间：2024/05/18 02:54
<!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> <style> .vip-uc-but{ height:auto; width:600px;} .vip-uc-but div{height:90px; float:left; } .vip-uc-but a{height:90px} .vip-uc-a a{background:#ccc; width:95px; display:block;} .vip-uc-a a:hover{background:url(/jscss/demoimg/wall_s1.jpg) no-repeat;} .vip-uc-b a{background:#ccc;width:95px; display:block;} .vip-uc-b a:hover{background:url(/jscss/demoimg/wall_s2.jpg) no-repeat;} .vip-uc-c a{background:#ccc; width:95px; display:block;} .vip-uc-c a:hover{background:url(/jscss/demoimg/wall_s3.jpg) no-repeat;} .vip-uc-d a{background:#ccc; width:95px; display:block;} .vip-uc-d a:hover{background:url(/jscss/demoimg/wall_s4.jpg) no-repeat;} .vip-uc-but a:link,.vip-uc-but a:visited,.uc-regis-but a:link,.uc-regis-but a:visited{color:#fff; font-size:0px;} .vip-uc-but a:hover{color:#d7d7d7;} </style> </head> <body> <div class="vip-uc-but"> <div class="vip-uc-a"><a href="#">修改密码</a></div> <div class="vip-uc-b"><a href="#">修改个人资料</a></div> <div class="vip-uc-c"><a href="#">查看邮件</a> </div> <div class="vip-uc-d"><a href="#">优币查询提现</a> </div> </div> </body> </html>
0 0
