鼠标经过背景变色效果利用CSS链接属性实现

发布时间：2018-08-19 01:46:47 所属栏目：聚会来源：站长网

导读：本文介绍的是一款鼠标经过背景变色的CSS代码，其实我们很早就接触过的，原理就是超级链接的HOVER与VISITED。我们经常上网的时候会见到，有些网站的某个部分，在鼠标放上后背景颜色会改变，移开后恢复，给人很不错的操作体验，那么这个效果是怎么用CSS来实

　　本文介绍的是一款鼠标经过背景变色的CSS代码，其实我们很早就接触过的，原理就是超级链接的HOVER与VISITED。

　　我们经常上网的时候会见到，有些网站的某个部分，在鼠标放上后背景颜色会改变，移开后恢复，给人很不错的操作体验，那么这个效果是怎么用CSS来实现的呢？请不知道的朋友认真参考一下本款代码，它专门是用来完成这一功能的代码。

　　网页演示：点击这里

　　运行演示：

<!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> <title>鼠标经过背景变色的CSS代码 - 烈火学院 Liehuo.Net</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> *{ margin:0; padding:0; list-style:none; font-size:14px; } img{ border:1px solid #ccc; } .info li{ padding:5px; width:144px; float:left; } .info li .img{ padding:5px; border:1px solid #cbcbcb; display:block; } .info li .img:link,.info li .img:visited{ border:1px solid #cbcbcb; } .info li .img:hover{ border:1px solid #cbcbcb; background:#f0f0f0; color:red; } span{ display:block; width:100%; clear:both; text-align:center; } </style> </head> <body> <div class="info"> <ul> <li><a href="#" class="img"><img src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_1.jpg"><span>图片名称</span></a></li> <li><a href="#" class="img"><img src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_2.jpg"><span>图片名称</span></a></li> <li><a href="#" class="img"><img src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_3.jpg"><span>图片名称</span></a></li> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

鼠标经过背景变色效果 利用CSS链接属性实现

鼠标经过背景变色效果利用CSS链接属性实现