鼠标颠末配景变色结果操作CSS链接属性实现

发布时间：2018-08-18 11:30:25 所属栏目：活动来源：站长网

导读：本文先容的是一款鼠标颠末配景变色的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链接属性实现