纯CSS简单特效之（指向当前状态）

来源：互联网发布：通达oa数据迁移编辑：程序博客网时间：2024/06/04 17:47

闪动当前选择以前写的JS已经删除了,而且全部是用CSS来完成的特效,省去了麻烦的代码.

查接看代码吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">

<head>

<title>CSS特效</title>

<style>

*{margin:0px;padding:0px;}

#DV_img{width:810px;margin:auto;padding:10px 0 10px 10px;}

#DV_img li{float:left;display:inline;width:152px;margin:0 10px 10px 0;list-style:none;}

#DV_img li a img{width:128px;height:98px;border:none;border:1px solid #fff;}

#DV_img li a{display:block;text-decoration:none;color:#fff;position:relative;background:#999;border:1px solid #000;padding:10px;}

#DV_img li a:hover{display:block;color:#999;border:1px solid #999966;background:#E4E4E4;}

#DV_img li a:hover span{display:block;position:absolute;top:10px;left:10px;*top:10px!important;*left:10px!important;*top:11px;*left:0;background:#F07611;color:#fff;font-size:14px;font-weight:bold;}

#DV_img li a:hover img{width:128px;height:98px;border:none;border:1px solid #DF7B0D;}

#DV_img li a:hover em{color:#666;}

#DV_img li a span{display:none;width:10px;padding:4px 5px;}

#DV_img li a em{ font-style:normal;display:block;text-align:center;font-size:12px;line-height:20px;}

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}

</style>

</head>

<body>

</ul>

</div>

</body>

</html>

来自：http://www.ok22.org