照片演示特效在网上,qq空间里经常可以看到,这种效果是如何通过css样式实现的呢?请看以下代码:
top:-1px;
width:1px;
height:1px;
overflow:hidden;
background:#efedec;
z-index:100;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}
a.gallery:hover span {
display:block;
position:absolute;
width:402px;
height:290px;
top:39px;
left:170px;
padding:5px;
font-style:italic;
color:#000;
background:#fff;
z-index:100;}
a.gallery:active {border:1px solid #eee;}
a.gallery:active span, a.gallery:focus span {
display:block;
position:absolute;
width:402px;
height:290px;
top:39px;
left:170px;
padding:5px;
font-style:italic;color:#000; background:#fff; z-index:50;}
#thumbs {width:840px; height:60px;}
#pad {height:310px; width:100px;}
针对IE6以下是引用片段:
以上就是利用css实现代码特效的例子,同学们可以试着自己做一下。